簡體 English 中英

z-index的子級：“ auto”與z-index：0，CSS中的“堆棧上下文”是什么？

[英]Children of z-index: 'auto' vs z-index: 0, and what is “stacking context” in CSS?

原文 2013-04-29 18:46:16 4 1 html/ css/ z-index

以前，我認為子元素不能在其父元素的同級元素中具有z索引比其父元素更高的元素上進行z索引。 例如，div A和B是同級。 Div A的z索引為10， div B的z索引為Div B的子元素為： Div C ，z索引為9999。據我所知， div C 不會位於上方div A ，因為div C的父級（ div B ）的z索引比div A 。 除非div B的z-index為“ auto”，否則這都是正確的。 當div B的z-index為'auto'時（因為它是從主體繼承的），它的值為'0'，即使div B的z-index實際上比當初的LOWER低，但div div C在div A位置沒有工作。

根據CSS2規范，z-index'auto'被定義為

當前堆棧上下文中生成的框的堆棧級別為0。除非框是根元素，否則框不會建立新的堆棧上下文。

我在理解“ 堆棧上下文 ”時遇到了麻煩。這似乎是定義的z-index為0和默認的“ auto”（默認值為0）之間唯一的區別，但默認值為0，但也沒有堆棧上下文。 進一步來說：

為什么沒有堆疊內容的元素的子代與堆疊上下文中的元素的子索引不同？

這是一個小提琴，顯示z-index為0和z-index為auto之間的差異。 綠色div是藍色div的子級，紅色div是藍色div的兄弟級。

http://jsfiddle.net/c7Tvt/

1 個解決方案

在您的示例中，您有兩種情況，分別稱為Blue和Blue-2。

在Blue中，您有兩個堆疊上下文，第一個包含#blue ，第二個包含#red和#green 。 #blue在其自身的堆棧上下文中，因為z-index: auto ，並且該上下文只是默認堆棧的一部分。

在藍2，您已定義z-index: 0為#blue ，所以它是在同一堆疊內容的一部分#red 。 在藍2， #blue首先畫，因為它具有最低的z-index，0。然而， #green是一個孩子#blue和被畫滿#blue ，家長和孩子形成一個新的堆疊內容（子-如果需要，可以疊加上下文）。 最后，由於紅色z-index為2，大於藍色z-index 0，因此#red被繪制在藍綠色堆棧上。在這種情況下，綠色的z-index影響其相對於blue和#blue任何其他子元素。 在Blue-2中，有三個堆疊上下文，默認為（＃1），一個為紅色和藍色（＃2），另一個為藍色和綠色（＃3）。

關鍵
z-index: auto不會開始將定位的元素添加到新的堆棧上下文中，而z-index: 0則可以。 請記住，至少有一個堆疊上下文，默認上下文是根據元素在頁面上的自然HTML / DOM順序為元素定義的。

注：我描述了跑馬圈地的位置，如果你有兩個網頁，一個與自由#red ， #blue ， #green並與第二#red2 ， #blue2 ， #green2 。 實際上，由於所有div都在同一頁上，因此所有堆疊級別都包含所有元素。 當同一堆棧中有兩個紅色div時， #red2將被繪制在#red因為DOM樹之后的元素被繪制在早期的元素之上。