CSS層疊順序與堆疊上下文的詳細介紹-css教學-PHP中文網

首頁

web前端

css教學

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

高洛峰

Mar 24, 2017 am 09:58 AM

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

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

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

<a href="http://www.php.cn/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)，有一張圖可以很好的詮釋：

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

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

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

the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).

#稍微翻譯一下：

形成堆叠上下文环境的元素的背景与边框
拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
无 position 定位（static除外）的 float 浮动元素
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
拥有 z-index:0 的子堆叠上下文元素
拥有正 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：