如何使用z-index以正确的顺序显示标签

Question

请考虑以下代码。

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

与下面的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/

我想李背景，以错误的顺序overlapp但我仍然希望一个标签，以显示UPP在李的背景。当我检查这个a标签的计算z-index是230 butt它仍然显示重叠li背景后面的upp为什么？

我可以用另一种方法完成这个效果吗？

Answer 1

提出的解决方案是行不通的，因为堆叠上下文。阅读本文以获取堆叠上下文的解释。 http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

要获得所需的效果，请反转li元素的渲染顺序，然后从右向左绘制它们。让它们重叠而不使用z-index，因此不会为每个创建新的堆叠上下文。

现在将z-index应用于标签。 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; 
} 

Answer 2

我不是完全肯定你想什么来实现 - 但你的意思是这个 - >http://jsfiddle.net/X4cLG/3/