CODEWITHSUNDEEP
phphtmlcss
sumit
sumit

Reputation: 11257

One CSS class overlapping another CSS class (image attached)

I am creating an e-commerce website. While showing discount box, the image of the item is shifted to the left (image below). I want the discount box (blue color) on top of the item class. Can anyone help me with this?

CSS file

div.item
{
    margin-top:0px;
    padding-top:20px;
    text-align:center;
    width:160px;
    float:left;
    border:1px solid red;
}

div.discount
{
    width:30px;
    height:30px;
    border:1px solid blue;
    float:right;
    margin-right:30px;
    margin-top:10px;
}

HTML File

<div class="item">
     <img src="items/1/s/a.jpg"/>
     <div class="discount">
          50% discount
     </div>
</div>

My example -- the blue box is not overlapping the image. Instead it displaces the image.

enter image description here

I want like this: in which discount box overlaps the image/CSS class

enter image description here

Upvotes: 0

Views: 1888

Answers (5)

Damon
Damon

Reputation: 10809

You could use z-index and absolute positioning on the top div. Something like:

div.discount
{                
    width:30px;
    position: absolute;
    z-index: 10;
    top: 8px;
    right: 8px;
    height:30px;
    border:1px solid blue;        
}

You could also use percentages instead of px in the top and right to make it a little more flexible.

Edit: You will also have to add position: relative to div.item (absolute position applies based on the closest containing element with a position applied).

z-index is not strictly necessary as long as the thing you want on top appears before the thing on the bottom in the code. I sometimes like to put it in there just in case things get moved around later.

Upvotes: 3

Phil
Phil

Reputation: 11175

This is something quick I made up, should work for you: JsFiddle Demo

Upvotes: 1

adlawson
adlawson

Reputation: 6431

div.item { position:relative; }
div.discount { position:absolute; top:-5px; left: -5px; }

Upvotes: 2

shanethehat
shanethehat

Reputation: 15570

You can use absolute positioning to place the blue box on top, just make sure that the parent element is set to position:relative.

div.item
{
    margin-top:0px;
    padding-top:20px;
    text-align:center;
    width:160px;
    float:left;
    border:1px solid red;
    position:relative;
}

div.discount
{
    width:30px;
    height:30px;
    border:1px solid blue;
    position:absolute;
    right:30px;
    top:10px;
}

Upvotes: 1

pleunv
pleunv

Reputation: 388

Try positioning the discount label absolute within the item div

div.item
{
    margin-top:0px;
    padding-top:20px;
    text-align:center;
    width:160px;
    border:1px solid red;
    position :relative;
}

div.discount
{
    width:30px;
    height:30px;
    border:1px solid blue;
    position: absolute;
    top: 20px;
    left: 20px;
}

Upvotes: 2

Related Questions