參考文章：
深入理解css中的層疊上下文和層疊順序
css深入理解之z-index
css深入理解之relative
先來弄清楚什麼是，層疊上下文。
層疊上下文，英文稱作」stacking context」. 是html中的乙個三維的概念。如果乙個元素含有層疊上下文，我們可以理解為這個元素在z軸上就「高人一等」。
看圖：頁面根元素天生具有層疊上下文，此外，元素d和e由於是定位元素設定了數值型的z-index，所以也具備了層疊上下文，從圖形上看，就是這樣；
那麼層疊順序又是什麼呢？
「層疊順序」英文稱作」stacking order」. 表示元素發生層疊時候有著特定的垂直顯示順序;在css2.1的年代，在css3還沒有出現的時候（注意這裡的前提），層疊順序規則遵循下面這張圖：
這是個什麼意思呢？比方說，我們看剛剛的元素d，元素d的內部實際上這個樣子的，也就是說，元素d內的元素如果發生層疊，按照這樣的順序來覆蓋；
那可能有人要問了，如果元素d裡面的元素，要和元素e裡面的元素重疊呢？那怎麼覆蓋呢？
那就是,先比較他們父元素的層疊上下文的層疊順序（如果父元素沒有層疊上下文，向上尋找至有層疊上下文的為止，如果都沒有，就是預設的根元素），再看一遍，因為元素d和元素e都具有層疊上下文
而元素d的z-index>元素e的z-index，所以元素d裡面的元素一定會覆蓋元素e的，至於元素e裡面的元素怎麼覆蓋，就是元素e自己的事了，這個時候，元素e裡面的元素就按照這個規則來層疊，嗯，明
白了？
可能有人要問，那如果元素e沒有層疊上下文，這裡元素d就和頁面根元素比較了？嗯，是的！
行文倉促，如有錯誤，歡迎指正~~~
層疊上下文
本文是我學習層疊上下文的總結。主要從以下途徑學習 mdn 張鑫旭大大的博文 層疊順序遵循下圖的規則，其中在張鑫旭大大的博文中提到inline block的層疊順序與圖中inline box是乙個level的 z index auto實際上和z index 0單純從層疊水平上看，可以認為是同一leve...
層疊上下文與z index
z index是咱們之前相對比較常用的乙個語法了，看起來比較簡單的樣子，實際上還真不難，因為這東西跟之前講的vertical align不一樣，這個比較符合咱們的認知。好了，不廢話，開始咱們的正式話題。首先呢？咱們先要了解一下層疊上下文 stack context 是什麼呢，其實通俗來講，就是你看電...
層疊上下文（stacking context）
一 什麼是層疊式上下文 層疊上下文，是html中的乙個三維概念 如果元素具備以下任何乙個條件，則該元素會建立乙個新的層疊上下文。二 什麼是層疊級別 同乙個層疊上下文的背景色以及內部元素，誰在上誰在下，這些都是由層疊級別來決定的。層疊級別是針對同乙個層疊上下文而言的。在同乙個曾得上下文中，層疊級別從低...