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级别中，其他属性可能会引入堆叠上下文，例如“不透明度”[CSS3COLOR]。

在每个堆叠上下文中，以下按顺序绘制以下图层：

构成堆叠背景的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

流入的，非内联级别，未定位的后代。

未定位的花车。

in-flow，内联级别，非定位后代，包括内联表和内联块。

堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。

具有正堆栈级别的子堆叠上下文（最少积极的第一个）。

Answer 2

如果您希望它在任何相对的后面，则将绝对div z-index设置为小于零。

Answer 3

一种可能性是检查元素的默认样式。我试图在幻灯片放映中重叠具有UI和LI元素的菜单下拉列表。我在ul上增加了z索引，但没有注意到li上的z索引为1（之前编码），防止了重叠。希望这有帮助的人

由于尔汉

z-index不适合我，我做错了什么？

3 个答案: