z-index 的表现不符合我的预期
所以我粗略地得到了这个：
<div id="A">
<ul>
<li id="B">foo</li>
</ul>
</div>
<div id="C">
...
</div>
它们的位置使 B 和 C 重叠。
A 的 z-index 为 90，B 的 z-index 为 92，C 的 z-index 为 92 91 的 z 索引。 但C出现在B面前。我做错了什么？ （如果需要更多详细信息，请告诉我。）
so i've got this, roughly:
<div id="A">
<ul>
<li id="B">foo</li>
</ul>
</div>
<div id="C">
...
</div>
These are positioned so that B and C overlap.
A has a z-index of 90, B has a z-index of 92, and C has a z-index of 91. But C shows up in front of B. What am i doing wrong? (Let me know if more detail is necessary.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用
z-index仅与同一容器中的元素相关。 由于 B 包含在 A 内部，因此 B 的 z 索引仅在解析 A 内部的其他元素时适用。就 C 而言，B 和 A 都在 z 索引 90 处渲染。但是，如果 C 放置在 A 内部，则 B将呈现在前面。Using
z-indexis only relevant for elements in the same container. Since B is contained inside A, B's z-index will only apply when resolving other elements inside A. As far as C is concerned, both B and A are rendered at z-index 90. However if C is placed inside A, then B will render in front.如果元素没有position:relative/position:absolute/position:fixed样式，则它的position:static是所有元素的默认位置样式。
对于position:static的元素，z-index根本不起作用。浏览器会按照xml元素的顺序渲染堆栈并忽略z-index属性。
对于这样的情况，您必须添加位置：相对于所有 3 个元素 A、B、C。
要了解有关 z 索引和 CSS 堆叠的更多信息，请前往此处：http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
If an element has no position:relative / position:absolute / position:fixed style, it's position:static which is the default position style for all elements.
With an element who is position:static, z-index simply doesn't work. The browser would render the stack in the order of xml element and ignore z-index property.
For a situation like this to work, you have to add position:relative to all 3 elements, A, B, C.
To understand more about z-index and CSS stacking, head to here: http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp