为什么 z-index 不能正确排序元素？

发布于 2024-11-05 09:55:01 字数 759 浏览 2 评论 0原文

我正在尝试将蓝色笑脸置于黄色笑脸下方。我做错了什么？

#group {
  position: relative
}

#sitename {
  z-index: 1
}

#listen {
  position: absolute;
  top: 150px;
  z-index: 0
}

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

实时复制

原文

I'm trying to get the blue smiley underneath the yellow smiley. What am I doing wrong?

#group {
  position: relative
}

#sitename {
  z-index: 1
}

#listen {
  position: absolute;
  top: 150px;
  z-index: 0
}

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

Live copy

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别靠近我心 2024-11-12 09:55:01

z-index 规则根据元素是否定位而变化。如果您将两个元素都定位，则它可以工作： http://jsfiddle.net/zPJm2/4/

它比我们大多数人刚开始时想象的要复杂一些。非常值得阅读 z-index 上的实际 CSS 规范了解详细信息，但基本上，有多个堆栈上下文。根据规范：

渲染树绘制到画布上的顺序是根据堆叠上下文来描述的。堆叠上下文可以包含更多堆叠上下文。从其父堆栈上下文的角度来看，堆栈上下文是原子的；其他堆叠上下文中的盒子不能位于其任何盒子之间。
每个盒子都属于一个堆叠上下文。给定堆叠上下文中的每个定位框都有一个整数堆叠级别，这是其在 z 轴上相对于同一堆叠上下文中的其他堆叠级别的位置。堆叠级别较高的框始终排在堆叠级别较低的框前面。盒子的堆叠级别可能为负。堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后到前堆叠。
根元素形成根堆叠上下文。其他堆叠上下文由具有除“auto”之外的“z-index”计算值的任何定位元素（包括相对定位的元素）生成。堆叠上下文不一定与包含块相关。在未来的 CSS 级别中，其他属性可能会引入堆叠上下文，例如“不透明度”[CSS3COLOR]。
在每个堆叠上下文中，以下图层按从后到前的顺序绘制：
形成堆叠上下文的元素的背景和边框。
具有负堆栈级别的子堆栈上下文（最负的第一个）。
流入、非内联级别、非定位后代。
非定位浮动。
流入、内联级、非定位后代，包括内联表和内联块。
堆栈级别为 0 的子堆栈上下文以及堆栈级别为 0 的定位后代。
具有正堆栈级别的子堆栈上下文（最不为正的优先）。

z-index rules vary depending on whether the element is positioned or not. If you make both elements positioned, it works: http://jsfiddle.net/zPJm2/4/

It's a bit more complicated than most of us think it is when we first start with it. It's well worth reading the actual CSS specification on z-index for the details, but basically, there are multiple stacking contexts. From the spec:

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.
Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity' [CSS3COLOR].
Within each stacking context, the following layers are painted in back-to-front order:
the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).

回复收藏 0 原文