談一些有趣的CSS題目（三）-- 層疊順序與堆疊上下文有多少-html教學-PHP中文網

談一些有趣的CSS題目（三）-- 層疊順序與堆疊上下文有多少

WBOY

發布： 2016-09-23 11:13:14

原創

1452 人瀏覽過

開本系列，討論一些有趣的 CSS 題目，拋開實用性而言，一些題目為了拓寬一下解決問題的思路，此外，涉及一些容易忽視的 CSS 細節。

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

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

所有題目總結在我的 Github 。

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

z-index 看起來其實很簡單，根據 z-index 的高低決定層疊的優先級，實則深入進去，會發現內有乾坤。

看看下面這題，定義兩個 div A 和 B，包括在同一個父 div 標籤下。 HTML結構如下：

<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
</div>

登入後複製

它們的 CSS 定義如下：

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

登入後複製

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

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

<div class="container">
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

登入後複製

会发现，无论顺序如何，始终是 display:inline-block 的 div 叠在上方。

Demo戳我。

这里其实是涉及了所谓的层叠水平（stacking level)，有一张图可以很好的诠释：

运用上图的逻辑，上面的题目就迎刃而解，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: 的子堆叠上下文元素（正的越低越堆叠层级越低）

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

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

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    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 的 div 不再一定疊在 float 的 div float 程式碼中的限制新增的div 之上。

這裡的關鍵點在於，新增的 opacity:0.9 這個讓兩個 div 都產生了 stacking context（堆疊上下文）的概念。此時，要對兩者進行層疊排列，就需要 z-index ，z-index 越高的層疊層級越高。

堆疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對於面向（電腦螢幕的）視窗或網頁的使用者的z 軸上延伸，HTML 元素依據其自身屬性依照優先順序佔用層疊上下文的空間。

那麼，如何觸發一個元素形成 堆疊上下文？方法如下，摘自 MDN：