CSS層疊順序與堆疊上下文的詳細介紹

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的CSS 屬性，趕緊去補習一下吧。

會不斷更新，不斷更新，不斷更新，重要的事情說三次。

3、層疊順序（stacking level）與堆疊上下文（stacking context）有多少？

<a href="//m.sbmmt.com/wiki/903.html" target="_blank">z-index</a> 看起來其實很簡單，根據 z-index 的高低決定層疊的優先級，其實深入進去，會發現內有乾坤。

看看下面這題，定義兩個 p A 和 B，被包含在同一個父 p 標籤下。 HTML架構如下：

<p>
    </p><p>#pA display:inline-block</p>
    <p> #pB float:left</p>

它們的 CSS 定義如下：

.container{
    position:relative;
    background:#ddd;
}
.container > p{
    width:200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

大概描述起來，意思是擁有共同父容器的兩個p 重疊在一起，是 display:inline-block 疊在上面，還是float:left 疊在上面？

注意這裡 DOM 的順序，是先生成 display:inline-block ，再產生 float:left 。當然也可以把兩個的DOM 順序調轉如下:

<p>
    </p><p> #pB float:left</p>
    <p>#pA display:inline-block</p>

會發現，無論順序如何，總是 display:inline-block 的 p  疊在上面。

這裡其實是涉及了所謂的層疊水平（stacking level)，有一張圖可以很好的詮釋：

運用上圖的邏輯，上面的題目就迎刃而解，inline-blcok 的 stacking level 比之 float 要高，所以無論DOM 的先後順序都堆疊在上面。

不過上面圖示的說法有些不準確，依照 W3官方 的說法，準確的7 層為：

1. the background and borders of the element forming the stacking context.

2. the child stacking contexts with negative stack levels (most negative first).

3. the in-flow, non-inline-level, non-positioned descendants.

4. the non-positioned floats.

5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

7. the child stacking contexts with positive stack levels (least positive first).

#稍微翻譯一下：

1. 形成堆叠上下文环境的元素的背景与边框

2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）

3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素

4. 无 position 定位（static除外）的 float 浮动元素

5. 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）

6. 拥有 z-index:0 的子堆叠上下文元素

7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

所以我们的两个 p 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高，所以叠得更高。

不过！不过！不过！重点来了，请注意，上面的比较是基于两个 p 都没有形成 堆叠上下文 这个为基础的。下面我们修改一下题目，给两个 p ，增加一个 opacity:

.container{
    position:relative;
    background:#ddd;
}
.container > p{
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里，增加一个 opacity
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

Demo戳我。

会看到，inline-block 的 p 不再一定叠在 float 的 p 之上，而是和 HTML 代码中 DOM 的堆放顺序有关，后添加的 p 会 叠在先添加的 p 之上。

这里的关键点在于，添加的 opacity:0.9 这个让两个 p 都生成了 stacking context（堆叠上下文） 的概念。此时，要对两者进行层叠排列，就需要 z-index ，z-index 越高的层叠层级越高。

堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

那么，如何触发一个元素形成 堆叠上下文 ？方法如下，摘自 MDN：

• 根元素 (HTML),

• z-index 值不为 "auto"的 绝对/相对定位，

• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，

• opacity 属性值小于 1 的元素（参考 the specification for opacity），

• transform 属性值不为 "none"的元素，

• mix-blend-mode 属性值不为 "normal"的元素，

• filter值不為「none」的元素，

• #perspective值不為「none」的元素，

• isolation 屬性被設定為"isolate"的元素，

• position: fixed

• 在will-change 中指定了任意CSS 屬性，即使你沒有直接指定這些屬性的值

• -webkit-overflow-scrolling 屬性被設定"touch"的元素

##所以，上面我們給兩個p 加入opacity 屬性的目的就是為了形成stacking context。也就是說添加 opacity 替換成上面列出來這些屬性都是可以達到相同的效果。

在層疊上下文中，其子元素同樣也依照上面解釋的規則進行層疊。 特別值得一提的是，其子元素的 z-index 值只在父級層疊上下文中有意義。意思是父元素的 z-index 低於父元素另一個同級元素，子元素 z-index再高也沒用。

理解上面的 stacking-level 與 stacking-context 是理解 CSS 的層疊順序的關鍵。

#

以上是CSS層疊順序與堆疊上下文的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！