z-index doesn't work with absolute elements - html

Question

When we have some absolute DIVs in page and one fixed DIV as a child of one of those absolute DIVs that has bigger z-index than those absolute DIVs, the fixed DIV goes behind of absolute DIVs!
Like this: http://jsfiddle.net/3qRaR/1/
HTML:
<div class='l1'>
<div class='data'></div>
</div>
<div class='l1'>
<div class='data'></div>
</div>
<div class='l1'>
<div class='data'></div>
</div>
<div class='l1'>
<div class='data'></div>
</div>
CSS:
.l1{
display: block;
width: 100px;
height: 100px;
background-color: yellow;
z-index:1001;
margin: 5px;
position: absolute;
}
.l1:nth-child(1){
left: 5px;
top: 5px;
}
.l1:nth-child(2){
left: 110px;
top: 5px;
}
.l1:nth-child(3){
left: 220px;
top: 5px;
}
.l1:nth-child(4){
left: 330px;
top: 5px;
}
.data{
display:none;
position: fixed;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:2000;
background: black;
}
.l1:first-child .data{
display: block;
}
Why?
How can I make it to go to the front of them?
Thanks

Answer 1

Remove the z-index from the .li rule and the black .data div will sit ontop of the yellow .li divs. I am assuming that is what you are trying to do?
.l1{
display: block;
width: 100px;
height: 100px;
background-color: yellow;
// Removed the z-index from here
margin: 5px;
position: absolute;
}

Answer 2

fixed makes divs fixed to document, not the element, even if it is absolute. Make .data divs of position absolute, not fixed.
http://jsfiddle.net/3qRaR/7/
.data{
display:none;
position: absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:2000;
background: black;
}
Edit:
If you want that fixed div to cover the entire document then just make the fixed div's container higher z-index than the rest:
http://jsfiddle.net/3qRaR/11/
.l1:nth-child(1){
z-index: 10000;
left: 5px;
top: 5px;
}