z-index对我不起作用，我哪里做错了？

Question

我在试着把蓝色笑脸放在黄色笑脸下面。我做错了什么？

HTML：

<div id="group">
    <h1 id="sitename">
        <a href="/"><img src="http://i5.photobucket.com/albums/y196/dannydude182/smiley-300x300.png" /></a></h1>
    <a id="listen" target="_blank" href="/"><img src="http://i925.photobucket.com/albums/ad96/emly_haha/annoyed-smiley.jpg" /></a>
</div>

CSS：

#group { position:relative }
#sitename { z-index:1 }
#listen { position:absolute;top:150px;z-index:0 }

Live copy

Answer 1

根据元素是否被定位，z-index规则会有所不同。如果将两个元素都放置好，它就会起作用：http://jsfiddle.net/zPJm2/4/

它比我们大多数人刚开始使用它时所想的要复杂一些。很值得阅读actual CSS specification on z-index来了解细节，但基本上，有多个堆栈上下文。从规范中：

根据堆叠上下文描述渲染树在画布上绘制的顺序。堆叠上下文可以包含更多的堆叠上下文。从其父堆叠上下文的角度来看，堆叠上下文是原子的；其他堆叠上下文中的框不能位于其任何框之间。

每个盒子都属于一个堆叠上下文。给定堆栈上下文中的每个定位框具有整数堆栈级，该整数堆栈级是其在z轴上相对于相同堆栈上下文中的其他堆栈级别的位置。堆栈级别较高的框总是在堆栈级别较低的框前面设置格式。框的堆栈级别可能为负值。在堆叠上下文中具有相同堆栈级别的框将根据文档树顺序从后到前堆叠。

根元素形成根堆叠上下文。其它堆叠上下文是由具有除'auto‘之外的'z-index’的计算值的任何定位元素(包括相对定位元素)生成的。堆叠上下文不一定与包含块相关。在未来的CSS级别中，其他属性可能会引入堆叠上下文，例如'opacity‘CSS3COLOR。

在每个堆叠环境中，以从后到前的顺序绘制以下图层：

1. 形成堆叠上下文的元素的背景和边框。
2. 具有负堆栈级别(最先是最负的)的子堆栈上下文。
3. in-flow，非内联级别，非定位descendants.
4. the非定位浮点。
5. in-flow，inline-level，非定位子代，包括内联表和内联块。
6. 堆栈级别为0的子堆栈上下文，以及堆栈级别为0的定位子代。
7. 堆栈级别为正的子堆栈上下文(最小正数最先)。

​

Answer 2

将绝对div z-index设置为小于零，如果您希望它落后于任何相对索引。

Answer 3

一种可能是检查元素的默认样式。我试图在幻灯片上叠加一个包含Ul和LI元素的下拉式菜单。我增加了ul上的z索引，但没有注意到li上的z索引为1(之前编码)，从而防止了重叠。希望这能帮助到某人

谢谢Farhan