CSS Z 索引：-1答案

【问题标题】：CSS Z-Index: -1CSS Z 索引：-1
【发布时间】：2013-06-02 16:16:24
【问题描述】：

我有一个元素，在这种情况下是一个 li 并将其相对定位，然后有一个 :after 伪元素。它具有“”内容，绝对定位，具有位置和尺寸以及框阴影。我已将它的 z-index 设置为 -1，问题是它正在回落到我页面上最底部的 z-indexed 元素。我预计它会回落 1 个位置，因此就在 li 后面。

有什么想法吗？如果我将伪的 z-index 设置为 1，那么它会跳到 li 的前面，我只想让它在它后面停一站。

【问题讨论】：

您能否看看如果将z-index:1 属性应用于li 会发生什么？
这样做会使伪元素跳到 li 上。我只是要剥离所有样式，看看网站上是否有任何干扰。会回来汇报的。刚刚在 Codepen 上尝试了一个简化的案例，这很好：cdpn.io/Kinvj 所以这不是“无法完成的问题”
这是预期的行为。我会在回答中解释。
发现问题，我需要 z-index: 1;在我的整体 .container 元素上。完美解决。
修改了我的答案：显然使用-1 并不意味着该元素显示在相对于它堆叠的任何东西的后面。您可以将 pseudo 的 z-index 更改为 0，将 li 的 z-index 更改为 1，仍然可以看到相同的结果。

【解决方案1】：

元素的 z-index 相对于最近的堆叠上下文定位它，不一定是父元素。此外，无论您是否指定负 z-index 值（显然在 FF2 中除外），都不能在堆叠上下文之后呈现任何元素。如果您打算让伪元素出现在li 后面，则作为li 祖先的元素必须创建一个堆叠上下文。

现在，如果以下条件之一为真（取自MDN），则元素只会创建堆叠上下文：

您可能已经注意到，显式指定li 容器的z-index 属性值（“auto”除外）可以解决问题。这是因为容器现在创建了自己的堆栈上下文，并且它是最近的堆栈上下文的所有后代将根据它们的z-index 值相对容器排列。

【讨论】：