Ariyan
Ariyan

Reputation: 15158

z-index doesn't work with absolute elements

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

Answers (2)

Linek
Linek

Reputation: 1363

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;
}

Upvotes: 0

Duncan Walker
Duncan Walker

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

Related Questions