Reputation: 15158
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
Upvotes: 0
Views: 1451
Reputation: 1363
fixed
makes divs fixed
to document, not the element, even if it is absolute
. Make .data divs of position absolute
, not fixed
.
.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:
.l1:nth-child(1){
z-index: 10000;
left: 5px;
top: 5px;
}
Upvotes: 0
Reputation: 2201
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;
}
Upvotes: 3