CSS z-index not working (position absolute)

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:

Remove

z-index:0;

from .absolute.

Updated fiddle here.

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/

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 */
}

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>

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.

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.

try this code:

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

}

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

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.

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.