Question

This is my code :

HTML

<div class="item">
    &nbsp;
</div>

<div class="item">
    <div class="item-abs">
        &nbsp;
    </div>
</div>

<div class="item">
    &nbsp;
</div>​

CSS

.item
{
    position:relative;
    z-index:5;
    float:left;
    background-color:red;
    width:100px;
    height:100px;
    margin:10px;
}

.item-abs
{
    position:absolute;
    top:0px;
    left:40px;
    z-index:500;
    background-color:blue;
    width:100px;
    height:100px;    
}
​

as you can see, if children have got 500 of z-index, is under the next parents. Is there a way to force the children z-index? Get riding the stack of the father? Or this scenario can’t be done?

I can’t change z-index of parents, and I’d like to do it without setting a proper descent z-index with javascript…

Answer 1

Sure there is, you don’t even need to set the z-index of the child.

Just set the z-index of the last div to a lower z-index, and you are done.

Example

The reason for this behaviour is the following: If parents have the same z-index, the one coming last in the DOM “wins”. So technically a simple z-index:1 on your parent with the absolute child would be enough. Other possibility is to set the z-index just on the child:

Example