CSS z-index not working (position absolute) [duplicate]

Question

I am trying to make the black div (relative) above the second yellow one (absolute). The black div's parent has a position absolute, too.

#relative {
	position: relative;
	width: 40px;
	height: 100px;
	background: #000;
	z-index: 1;
	margin-top: 30px;
}
.absolute {
	position: absolute;
	top: 0; left: 0;
	width: 200px;
	height: 50px;
	background: yellow;
	z-index: 0;
}

<div class="absolute">
    <div id="relative"></div>
</div>
<div class="absolute" style="top: 54px"></div>

Expected Result:

Instate

I wonder why my question (7y ago) is closed and marked as a duplicate of another question from 2y ago – Instate

Answer 1

Remove

z-index:0;

from .absolute.

Updated fiddle here.

Academic

This solved my problem as well, but… why? – Cousteau

@Cousteau It has to do with the stacking context. As soon as you give the parent (the first .absolute) a z-index, the children will be inside that parent's stacking context, which is behind the second .absolute because it appears later. For me it helped to read this article with visual examples and a related, also visual StackOverflow question. – Fivespot

Answer 2

This is because of the Stacking Context, setting a z-index will make it apply to all children as well.

You could make the two <div>s siblings instead of descendants.

<div class="absolute"></div>
<div id="relative"></div>

http://jsfiddle.net/P7c9q/3/

Mullane

This helps me to set z-index in parents and it works. thank – Ethereal

Answer 3

I was struggling with this problem, and I learned (thanks to this post) that:

opacity can also affect the z-index

div:first-child {
  opacity: .99; 
}

.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.red {
  z-index: 1;
  top: 20px;
  left: 20px;
  background: red;
}

.green {
  top: 60px;
  left: 60px;
  background: green;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
}

<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

Neuman

Here on Mozzila developers page you can find more details about stacking. – Upwards

Answer 4

I was struggling to figure it out how to put a div over an image like this:

No matter how I configured z-index in both divs (the image wrapper) and the section I was getting this:

Turns out I hadn't set up the background of the section to be background: white;

so basically it's like this:

<div class="img-wrp">
  <img src="myimage.svg"/>
</div>
<section>
 <other content>
</section>

section{
  position: relative;
  background: white; /* THIS IS THE IMPORTANT PART NOT TO FORGET */
}
.img-wrp{
  position: absolute;
  z-index: -1; /* also worked with 0 but just to be sure */
}

Overstuffed

Thanks man you saved me for don't know how long... Thanks – Casserole

@PraveenKumar happy to help! – Overstuffed

would never in my life have guessed it was the reason – Brisson

Answer 5

Just add the second .absolute div before the other .second div:

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

Because the two elements have an index 0.

Lover

Answer 6

try this code:

.absolute {
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 50px;
    background: yellow;

}

http://jsfiddle.net/manojmcet/ks7ds/

Prorate

Answer 7

How about this?

http://jsfiddle.net/P7c9q/4/

<div class="relative">
  <div class="yellow-div"></div>
  <div class="yellow-div"></div>
  <div class="absolute"></div>
</div>

.relative{
position:relative;
}

.absolute {
position:absolute;
width: 40px;
height: 100px;
background: #000;
z-index: 1;
top:30px;
left:0px;
}
.yellow-div {
position:relative;
width: 200px;
height: 50px;
background: yellow;
margin-bottom:4px;
z-index:0;
}

use the relative div as wrapper and let the yellow div's have normal positioning.

Only the black block need to have an absolute position then.

Ophiuchus

Answer 8

JSFiddle

You have to put the second div on top of the first one because the both have an z-index of zero so that the order in the dom will decide which is on top. This also affects the relative positioned div because its z-index relates to elements inside the parent div.

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

Css stays the same.

Vullo

Answer 9

I solved my z-index problem by making the body wrapper z-index:-1 and the body z-index:-2, and the other divs z-index:1.

And then the later divs didn't work unless I had z-index 200+. Even though I had position:relative on each element, with the body at default z-index it wouldn't work.

Hope this helps somebody.

Hatty