CSS層疊上下文/層疊等級

什麼是「層疊上下文」

• 層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規範中，每一個盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。通常狀況下，元素在頁面上沿X軸Y軸平鋪，咱們察覺不到它們在Z軸上的層疊關係。而一旦元素髮生堆疊，這時就能發現某個元素可能覆蓋了另外一個元素或者被另外一個元素覆蓋。

什麼是「層疊等級」

• 層疊等級(stacking level，叫「層疊級別」/「層疊水平」也行)
• 在同一個層疊上下文中，它描述定義的是該層疊上下文中的層疊上下文元素在Z軸上的上下順序。
• 在其餘普通元素中，它描述定義的是這些普通元素在Z軸上的上下順序。
• z-inx爲正 > z-index爲0 > 行內元素 > 浮動元素 > 塊級元素 > z-index爲負 > bk/border
• 層疊順序示意圖：（在同一層疊上下文中，層疊順序纔有意義）
  
• 實例：

<!-- 由於在同一層疊上下文中優先級爲：行內元素>浮動元素>塊級元素，所以span中的字符會完整展現出來 -->
 <div>
    <div style="border:1px blue solid; width: 50px; height: 50px; background-color: blue">
        <div style="border:1px black solid; width: 50px; height: 30px; float: left; background-color: black">
            <span style="border:1px red solid; background-color: red">6666666666666666</span>
        </div>
    </div>
</div>