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值排列所有與其最近的堆棧上下文的后代。