層疊上下文與層疊順序

20190303-22:47於家中

一旦普通元素具有了層疊上下文，其層疊順序就會變高。那它的層疊順序
究竟在哪個位置、哪個級別呢?

ps：個人理解上面這句話：層疊上下文即層疊上下文環境，位於最底層
一旦普通元素進入層疊上下文環境，其層疊順序會變高。

因此，頁面中所有的元素一定處於至少一個“層疊結界”中。

這裡需要分兩種情況討論:

(1)如果層疊上下文元素不依賴 z-index 數值，則其層疊順序是 z-index:auto，可看成 z:index:0 級別;

(2)如果層疊上下文元素依賴 z-index 數值，則其層疊順序由 z-index 值決定。

我們上面提供的層疊順序圖實際上還缺少其他重要資訊。我又花工夫重新繪製了一個更完整的 7 階層疊順序圖，如圖 7-7 所示。

image.png

這下大家應該知道為什麼定位元素會層疊在普通元素的上面了吧?其根本原因就是:元素 一旦成為定位元素，其 z-index 就會自動生效，此時其 z-index 就是預設的 auto，也就是 0 級別，根據上面的層疊順序表，就會覆蓋 inline 或 block 或 float 元素。而不支援 z-index 的層疊上下文元素天然是 z-index:auto 級別，也就意味著，層疊上下文元素和定位元素是 一個層疊順序的，於是當它們發生層疊的時候，遵循的是“後來居上”準則。