Question

Consider the following code.

<ul>
    <li><a href="#1" >Item 1</a></li>
    <li><a href="#2" >Item 2</a></li>
    <li><a href="#3" >Item 3</a></li>
</ul>

with following CSS

ul {    
    position: relative;
    z-index: 200;
}

li {
    position: absolute;
}

li:first-child {
    background: #453;
    width: 300px;
    border: none;
    z-index: 207;
    height: 30px;
}

li:nth-child(2) {
    background: #537;
    width: 200px;
    left: 100px;
    border: none;
    z-index: 206;
    height: 50px;
}

li:nth-child(3) {
    background: #735;
    width: 100px;
    left: 200px;
    border: none;
    z-index: 205;
    height: 70px;
}

ul li a {
    z-index: 230;
    position: relative;
    display:block;
}

http://jsfiddle.net/X4cLG/

I want the li backgrounds to overlapp in the wrong order but i still want the a tags to show upp over the li backgrounds. When i inspect this the calculated z-index for the a tags is 230 butt it is still showing upp behind the overlapping li backgrounds why?

Can i accomplish this effect in another way?

Answer 1

The proposed solution ain’t working because of stacking context. Read this for an explanation of stacking context. http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

To get the desired effect reverse the rendering order of the li elements and draw them from right to left instead. To get them to overlap without using z-index hence not creating new stacking contexts for each.

Now apply z-index to a tags. http://jsfiddle.net/X4cLG/20/

html:

<ul>
    <li><a href="#3" >Item 3</a></li>
    <li><a href="#2" >Item 2</a></li>
    <li><a href="#1" >Item 1</a></li>
</ul> 

CSS:

ul {    
    position: relative;
    width: 300px;
}

li {
    position: absolute;
}

li:first-child {
    background: #453;
    width: 100px;
    height: 70px;
    right: 0;
}

li:nth-child(2) {
    background: #537;
    width: 200px;
    right: 0;
    height: 50px;
}

li:nth-child(3) {
    background: #735;
    width: 300px;
    right: 0;
    height: 30px;
}

ul li a {
    position: absolute;
    z-index: 999;
}