- 1 . 什么是堆疊順序？
- 2 . 什么是堆疊上下文贾漏？
堆疊順序：
- background
- border
- 塊級
- 浮動
- 內(nèi)聯(lián)
- z-index: 0
- z-index: +
判斷一個人是否了解堆疊上下文的概念時候学，我想到了下面的這道題
初識堆疊上下文.png
看上面的圖思考下面的這個問題：
border和background之間的關系是什么？
A：在同一面上纵散，相平齊
B：border更加靠近用戶
C：background更加靠近用戶
為了驗證上面的猜想梳码，我引入0.5透明度border的現(xiàn)象來實現(xiàn)最終效果
顯然可以看出：border更加靠近用戶。
由此我們可以想到DIV它并不是一個平面的物體伍掀，也是有層次的概念掰茶。
通過平面和側面的圖也可以看出效果
image
同樣，為了驗證在DIV中寫入文字驗證最終效果：
image
側面實際呈現(xiàn)是：
image
接著我在div的子元素引入的child來驗證堆疊效果：
image
最終的結果是div的元素效果是蓋不住文字（內(nèi)聯(lián)元素）效果蜜笤。也就是說內(nèi)聯(lián)元素離用戶更加接近濒蒋。
image
最后我想到了一個同級化的問題，當我的子代出現(xiàn)內(nèi)聯(lián)元素和父級同時出現(xiàn)內(nèi)聯(lián)元素時把兔，誰會更加接近用戶的眼睛沪伙？
image
結果是非常明顯的，誰最后寫入誰就更加接近用戶的眼睛（蓋住前面元素）县好。
上面我們通過猜想驗證的方式簡單的介紹了border围橡，background和塊級元素，接下來我們再來驗證一下浮動元素：
為了更直觀的看出效果缕贡，我給內(nèi)聯(lián)元素‘你好’設置了text-indent: -10px;
效果如圖：
image
很顯然翁授，內(nèi)聯(lián)元素的更加出現(xiàn)在上層拣播，而浮動的元素天生優(yōu)先于塊級元素
image
截止至目前我們看到的所有效果：內(nèi)聯(lián)元素>浮動元素/浮動內(nèi)聯(lián)元素>塊級元素>border>background
其中，有關于內(nèi)聯(lián)元素誰最后寫入誰更加浮現(xiàn)在用戶面前收擦。
接下來我們接著比較絕對定位和相對定位元素的堆疊上下文的優(yōu)先級誰更高贮配？
image
可以看出經(jīng)過絕對定位的元素優(yōu)先級是高于浮動定位的元素的！
image
接下來比較z-index和position：relative之間的優(yōu)先級：
image
通過對relative設置margin-top來清楚的可以看到relative的優(yōu)先級是高于z-index的塞赂。
這時候我們得出一個結論：只有被定位的元素的優(yōu)先級等級才會高于沒有被定位的優(yōu)先級的元素(position:static)
image
同樣泪勒，通過上圖我們可以得出，設置了relative的元素后出現(xiàn)的元素優(yōu)先級一定高于先出現(xiàn)的元素减途。
image
而對relative設置了z-index（>=1）元素的優(yōu)先級則高于沒有設置z-index的relative的元素酣藻。
在考慮position:absolute與relative做對比時，同樣也是只考慮z-index的影響：
image
上圖說明對relative與absolute做比較時鳍置，誰后出現(xiàn)誰的優(yōu)先級就更高辽剧。可以把absolute和relative當作同級來看待税产，但是如果對其中一個元素設置了z-index就會可以看出通過設置absolute/relative的元素優(yōu)先級都會高于沒有設置z-index的元素怕轿。
注：如果父元素z-index：0 子元素設置z-index：-1則子元素則會顯示出來
結論.png
所以說，正如自然界很多物質(zhì)一樣辟拷。我們無法解釋它的原理撞羽，但是可以通過現(xiàn)象來判斷它的屬性。如果這么說起來你聽的有點麻煩衫冻，那么我問你:"請問：什么是桌子诀紊？" 我想你可能說：上面是個平板下面有四根腿撐著的木頭叫做桌子.那么接著反問你：板凳算不算是桌子？如果算隅俘，為什么不叫板凳是桌子邻奠？如果不算，桌子不也是四根腿为居，一面平板嗎碌宴！所以究其本質(zhì)我們可以說：用來吃飯的載體我們可以判斷它就是桌子。
同樣的道理我們可以引申到堆疊上下文蒙畴，我們只知道一些屬性會觸發(fā)上下文贰镣，但是并不知道堆疊上下文是什么。
所以觸發(fā)堆疊上下文的內(nèi)容有以下：
- 根元素（HTML）
- z-index值不為”auto“的絕對定位/相對定位
- 一個 z-index 值不為 "auto"的 flex 項目 (flex item)膳凝，即：父元素 display: flex|inline-flex
- opacity 屬性值小于 1 的元素（參考 the specification for opacity）
- transform 屬性值不為 "no ne"的元素
- mix-blend-mode 屬性值不為 "normal"的元素
- filter值不為“none”的元素
- perspective值不為“none”的元素
- isolation 屬性被設置為 "isolate"的元素
- position: fixed
- 在 will-change 中指定了任意 CSS 屬性碑隆，即便你沒有直接指定這些屬性的值（參考 這篇文章）
- -webkit-overflow-scrolling 屬性被設置 "touch"的元素
image
通過上圖我們可以看出，圖中沒有z-index蹬音。但是依然形成了堆疊上下文的效果上煤。之所以引發(fā)這種效果的原因是滿足了堆疊上下文的第一個條件根元素<html>
其次，如果父元素HTML是一個家長祟绊，是其內(nèi)部都具備堆疊上下文的結構楼入。但是如果給一個子元素單獨設置堆疊上下文，而另一個子元素沒有設置堆疊上下文牧抽，則沒有設置堆疊上下文效果的內(nèi)容將會被掩蓋嘉熊。
image
上圖解釋了如果兩個子元素同時設置了堆疊上下文那么兩個子元素則具備兄弟同時競爭，后出現(xiàn)的優(yōu)先級較高的效果.
最后我們需要考慮到一種最特殊的情況：如果給最高級元素設置z-index：-1則后代元素就會顯示出來扬舒，這是因為此時的層疊上下文從總體來看是一個整體阐肤，所以后代元素會顯示出來，而不是被子代或者孫子代掩蓋住讲坎。
