CSS Z-Index：-1

Question

我有一个元素，在这种情况下是一个li并且已经将它定位为相对，然后有一个：after伪元素。它有＆＃34;＆＃34;内容，绝对定位，有一个位置和角钱和一个盒子阴影。我已将它的z-index设置为-1，问题是它正在回退到我页面上最底部的z-indexed元素。我希望它能回落到一个位置，所以要落后于李。

我关注此事：http://nicolasgallagher.com/css-drop-shadows-without-images/

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

Answer 1

元素的z-index将其相对于最近的堆叠上下文定位，不一定是父元素。此外，无论您是否指定负z-index值（FF2中显然除外），都不能在堆叠上下文后面后面渲染元素。如果您打算将伪元素显示在li后面，则li的祖先元素必须创建堆叠上下文。

现在，如果满足下列条件之一，则元素仅创建堆叠上下文（取自MDN）：

• 元素是根元素（HTML），
• 使用除z之外的z-index值定位（绝对或相对） “自动”下，
• 它的不透明度值小于1.（参见规范 不透明度）

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