CSS Z索引：-1

Question

我有一个元素，在这种情况下为li，并且已将其相对放置，然后有一个：after伪元素。 它具有绝对定位的“”内容，具有位置，尺寸，盒子阴影。 我已将其z-index设置为-1，问题是它正回落到页面上最底部的z-indexed元素上。 我希望它能再下降1位，以便排在li之后。

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

有任何想法吗？ 如果将伪的z-index设置为1，则它会跳到li的前面，我只希望它在li的后面停一停。

Answer 1

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

现在，仅当满足以下条件之一（从MDN中获取 ）时，元素才创建堆栈上下文：

• 元素是根元素（HTML），
• 使用非“ auto”的z索引值 （绝对或相对）定位它，
• 它的不透明度值小于1。（有关不透明度，请参见规格）

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