開本系列，討論一些有趣的 CSS 題目，拋開實用性而言，一些題目為了拓寬一下解決問題的思路，此外，涉及一些容易忽視的 CSS 細節(jié)。
解題不考慮兼容性，題目天馬行空，想到什么說什么，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
【有趣的CSS題目二】從條紋邊框的實現(xiàn)談盒子模型
所有題目匯總在我的 Github （https://github.com/chokcoco/iCSS/issues/1）。
3、層疊順序（stacking level）與堆棧上下文（stacking context）知多少？
z-index 看上去其實很簡單，根據 z-index 的高低決定層疊的優(yōu)先級，實則深入進去，會發(fā)現(xiàn)內有乾坤。
看看下面這題，定義兩個 div A 和 B，被包括在同一個父 div 標簽下。HTML結構如下：
<>class='inline-block'>#divA display:inline-block
<>class='float'> #divB float:left
它們的 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 順序調轉如下:
<>class='container'>
<>class='float'> #divB float:left
<>class='inline-block'>#divA display:inline-block
會發(fā)現(xiàn)，無論順序如何，始終是 display:inline-block 的 div 疊在上方。
Demo戳我（http://codepen.io/Chokcoco/pen/gwLYNy）。
這里其實是涉及了所謂的層疊水平（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).
稍微翻譯一下：
形成堆疊上下文環(huán)境的元素的背景與邊框
擁有負 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戳我（http://codepen.io/Chokcoco/pen/qaqdqA）。
會看到，inline-block 的 div 不再一定疊在 float 的 div 之上，而是和 HTML 代碼中 DOM 的堆放順序有關，后添加的 div 會 疊在先添加的 div 之上。
這里的關鍵點在于，添加的 opacity:0.9 這個讓兩個 div 都生成了 stacking context（堆疊上下文） 的概念。此時，要對兩者進行層疊排列，就需要 z-index ，z-index 越高的層疊層級越高。
堆疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網頁的用戶的 z 軸上延伸，HTML 元素依據其自身屬性按照優(yōu)先級順序占用層疊上下文的空間。
那么，如何觸發(fā)一個元素形成 堆疊上下文 ？方法如下，摘自 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”的元素
所以，上面我們給兩個 div 添加 opacity 屬性的目的就是為了形成 stacking context。也就是說添加 opacity 替換成上面列出來這些屬性都是可以達到同樣的效果。
在層疊上下文中，其子元素同樣也按照上面解釋的規(guī)則進行層疊。 特別值得一提的是，其子元素的 z-index 值只在父級層疊上下文中有意義。意思就是父元素的 z-index 低于父元素另一個同級元素，子元素 z-index再高也沒用。
理解上面的 stacking-level 與 stacking-context 是理解 CSS 的層疊順序的關鍵。
所有題目匯總在我的 Github ，發(fā)到博客希望得到更多的交流。
到此本文結束，如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
