CODEWITHSUNDEEP
htmlcsscss-floatz-index
Jeremy Harris
Jeremy Harris

Reputation: 24549

Floating Div Over An Image

I'm having trouble floating a div over an image. Here is what I am trying to accomplish: 

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
    }
    .tag {
       float: left;
       position: relative;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }
    <div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
    </div>

In this image:

enter image description here

I want the "Featured" box to float over top of the image but instead it seems to "clear" the float and cause the image to wrap to the next line, as though it was displaying as a block element. Unfortunately, I can't figure out what I am doing wrong. Any ideas?

Upvotes: 69

Views: 268436

Answers (6)

Gass
Gass

Reputation: 9344

You can achieve this with relative position.

But why isn't your code working?

An element with position:relative keeps it's position and also still affects all other following elements. That's the reason why your div won't overlap the image by just using z-index.

You'll still need to position the div element with, for example: top:-28px where the amount would be the height of the element with tag class.

Note: top has no effect on non-positioned elements. It works with absolute, relative and sticky.

If you add top:-28px to the tag element it will only overlap the image if the z-index it has a higher number. This is the importance of z-index in this case.

.container {
  width: 200px;
  height: 200px;
}
.tag {
   position: relative;
   z-index: 1;
   float: left;
   padding: 5px;
   color: #FFFFFF;
   font-weight: bold;
   background-color: #92AD40;
}
img{
  position:relative;
  z-index:0;
  top:-28px;
}
<div class="container">
  <div id='tag' class="tag">Featured</div>
  <img id='img' src="https://i.sstatic.net/rUDax.png">
</div>

If you want to play a bit with this concepts

I added some JS code to toggle between different styles

const tag = document.getElementById('tag')
const img =  document.getElementById('img')
const label1 = document.getElementById('label1')
const label2 = document.getElementById('label2')

function togglePosition(){
  if(!tag.style.position){
    tag.style.position = 'relative'
    img.style.position = 'relative'
    label1.innerHTML = 'Relative position added'
  }
  else{
    tag.style.position = null
    img.style.position = null
    label1.innerHTML = 'Add relative position'
  }
}

function toggleZindex(){
   if(!tag.style.zIndex){
    tag.style.zIndex = '1'
    img.style.zIndex = '0'
    label2.innerHTML = 'z-index  (1 and 0) added to elements'
  }
  else{
    tag.style.zIndex = null
    img.style.zIndex = null
    label2.innerHTML = 'Add z-index to elements'
  }
}
.container {
  margin-top:20px;
  width: 200px;
  height: 200px;
}
.tag {
   float: left;
   padding: 5px;
   color: #FFFFFF;
   font-weight: bold;
   background-color: #92AD40;
}
img{
  top:-28px;
}
<input type='checkbox' onclick='togglePosition()'/> 
<label id='label1'>Add relative position</label>
<br/>
<input type='checkbox' onclick='toggleZindex()'/> 
<label id='label2'>Add z-index to elements</label>

<div class="container">
  <div id='tag' class="tag">Featured</div>
  <img id='img' src="https://i.sstatic.net/rUDax.png">
</div>

Upvotes: 2

Jeremy Harris
Jeremy Harris

Reputation: 24549

Never fails, once I post the question to SO, I get some enlightening "aha" moment and figure it out. The solution:

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
       position: relative;
    }
    .tag {
       float: left;
       position: absolute;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }
<div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
</div>

The key is the container has to be positioned relative and the tag positioned absolute.

Upvotes: 147

Thomas Cheney
Thomas Cheney

Reputation: 388

Actually just adding margin-bottom: -20px; to the tag class fixed it right up.

http://jsfiddle.net/dChUR/7/

Being block elements, div's naturally have defined borders that they try not to violate. To get them to layer for images, which have no content beside the image because they have no closing tag, you just have to force them to do what they do not want to do, like violate their natural boundaries.

.container {
  border: 1px solid #DDDDDD;
  width: 200px;
  height: 200px;
  }
.tag {
  float: left;
  position: relative;
  left: 0px;
  top: 0px;
  background-color: green;
  z-index: 1000;
  margin-bottom: -20px;
  }

Another toue to take would be to create div's using an image as the background, and then place content where ever you like.

<div id="imgContainer" style="
         background-image: url("foo.jpg"); 
         background-repeat: no-repeat; 
         background-size: cover; 
         -webkit-background-size: cover; 
         -mox-background-size: cover; 
         -o-background-size: cover;">
  <div id="theTag">BLAH BLAH BLAH</div>
</div>

Upvotes: 6

user2690583
user2690583

Reputation:

you might consider using the Relative and Absolute positining. 

`.container {  
position: relative;  
}  
.tag {     
position: absolute;   
}`

I have tested it there, also if you want it to change its position use this as its margin:

top: 20px;
left: 10px;

It will place it 20 pixels from top and 10 pixels from left; but leave this one if not necessary.

Upvotes: 1

user1618143
user1618143

Reputation: 1748

You've got the right idea. Looks to me like you just need to change .tag's position:relative to position:absolute, and add position:relative to .container.

Upvotes: 2

j08691
j08691

Reputation: 207901

Change your positioning a bit:

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: green;
}

jsFiddle example

You need to set relative positioning on the container and then absolute on the inner tag div. The inner tag's absolute positioning will be with respect to the outer relatively positioned div. You don't even need the z-index rule on the tag div.

Upvotes: 22

Related Questions