z-index的孩子：'auto'vs z-index：0，什麼是CSS中的「stacking context」？

Question

以前，我相信一個子元素不能被Z-indexed在一個元素上，該元素是它的父元素的一個父元素的z-index比它的父元素高。例如，div A和​​B是兄弟姐妹。 Div A具有10的z-index，並div B有5 Div B的z-index有一個子元素：Div C，與9999的z-index從我的理解，div C將不被定位在div A，因爲div C的父母（div B）的Z指數低於div A。這是成立的，除非div B具有「自動」的z-索引。當div B具有'自動'的z索引（其將是0），因爲它從身體繼承，div C位置超過div A，即使div B的z索引實際上是LOWER比它當它不是'不工作。

從CSS2規範，z索引「自動」被定義爲

在當前堆疊內容所生成的框的堆棧級別爲0，除非它是該框不建立新的堆疊內容根元素。

我無法理解「堆疊上下文。」這似乎是0定義的z-index之間和「自動」，這是0的默認情況下，唯一的區別，也沒有堆疊內容。更具體地說：

爲什麼沒有堆疊內容的子元素的子元素與堆棧上下文中的元素不同？

這是一個小提琴，它顯示了z-index爲0和z-index爲auto的區別。綠色div是藍色div的孩子，紅色div是藍色div的兄弟。

http://jsfiddle.net/c7Tvt/

Answer 1

在你的榜樣，你有兩種情況，稱他們爲藍色和藍2。

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

在Blue-2中，您爲#blue定義了z-index: 0，因此它與#red是同一個堆疊上下文的一部分。在Blue-2中，#blue首先被繪製，因爲它具有最低的z-索引0。然而，#green是#blue的孩子，並且被繪製在#blue上，父和子形成新的堆疊上下文（如果是子堆棧上下文if你希望）。 最後，#red被塗在藍綠色堆棧上，因爲紅色z-索引是2，它大於0的藍色z-索引。在這種情況下，綠色的z-索引影響其關於藍色和#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樹下方的元素被繪製在較早的元素上。

參考
我發現下面的閱讀非常有用：
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2

如果您想更詳細，嘗試尋找：
http://www.w3.org/TR/CSS21/zindex.html