- 1 . 什么是堆疊順序？
- 2 . 什么是堆疊上下文？
堆疊順序：
- background
- border
- 塊級(jí)
- 浮動(dòng)
- 內(nèi)聯(lián)
- z-index: 0
- z-index: +
判斷一個(gè)人是否了解堆疊上下文的概念時(shí)，我想到了下面的這道題
初識(shí)堆疊上下文.png
看上面的圖思考下面的這個(gè)問題：
border和background之間的關(guān)系是什么？
A：在同一面上，相平齊
B：border更加靠近用戶
C：background更加靠近用戶
為了驗(yàn)證上面的猜想，我引入0.5透明度border的現(xiàn)象來實(shí)現(xiàn)最終效果
顯然可以看出：border更加靠近用戶。
由此我們可以想到DIV它并不是一個(gè)平面的物體，也是有層次的概念。
通過平面和側(cè)面的圖也可以看出效果
image
同樣，為了驗(yàn)證在DIV中寫入文字驗(yàn)證最終效果：
image
側(cè)面實(shí)際呈現(xiàn)是：
image
接著我在div的子元素引入的child來驗(yàn)證堆疊效果：
image
最終的結(jié)果是div的元素效果是蓋不住文字（內(nèi)聯(lián)元素）效果。也就是說內(nèi)聯(lián)元素離用戶更加接近。
image
最后我想到了一個(gè)同級(jí)化的問題，當(dāng)我的子代出現(xiàn)內(nèi)聯(lián)元素和父級(jí)同時(shí)出現(xiàn)內(nèi)聯(lián)元素時(shí)，誰會(huì)更加接近用戶的眼睛？
image
結(jié)果是非常明顯的，誰最后寫入誰就更加接近用戶的眼睛（蓋住前面元素）。
上面我們通過猜想驗(yàn)證的方式簡單的介紹了border，background和塊級(jí)元素，接下來我們?cè)賮眚?yàn)證一下浮動(dòng)元素：
為了更直觀的看出效果，我給內(nèi)聯(lián)元素‘你好’設(shè)置了text-indent: -10px;
效果如圖：
image
很顯然，內(nèi)聯(lián)元素的更加出現(xiàn)在上層，而浮動(dòng)的元素天生優(yōu)先于塊級(jí)元素
image
截止至目前我們看到的所有效果：內(nèi)聯(lián)元素>浮動(dòng)元素/浮動(dòng)內(nèi)聯(lián)元素>塊級(jí)元素>border>background
其中，有關(guān)于內(nèi)聯(lián)元素誰最后寫入誰更加浮現(xiàn)在用戶面前。
接下來我們接著比較絕對(duì)定位和相對(duì)定位元素的堆疊上下文的優(yōu)先級(jí)誰更高？
image
可以看出經(jīng)過絕對(duì)定位的元素優(yōu)先級(jí)是高于浮動(dòng)定位的元素的！
image
接下來比較z-index和position：relative之間的優(yōu)先級(jí)：
image
通過對(duì)relative設(shè)置margin-top來清楚的可以看到relative的優(yōu)先級(jí)是高于z-index的。
這時(shí)候我們得出一個(gè)結(jié)論：只有被定位的元素的優(yōu)先級(jí)等級(jí)才會(huì)高于沒有被定位的優(yōu)先級(jí)的元素(position:static)
image
同樣，通過上圖我們可以得出，設(shè)置了relative的元素后出現(xiàn)的元素優(yōu)先級(jí)一定高于先出現(xiàn)的元素。
image
而對(duì)relative設(shè)置了z-index（>=1）元素的優(yōu)先級(jí)則高于沒有設(shè)置z-index的relative的元素。
在考慮position:absolute與relative做對(duì)比時(shí)，同樣也是只考慮z-index的影響：
image
上圖說明對(duì)relative與absolute做比較時(shí)，誰后出現(xiàn)誰的優(yōu)先級(jí)就更高。可以把a(bǔ)bsolute和relative當(dāng)作同級(jí)來看待，但是如果對(duì)其中一個(gè)元素設(shè)置了z-index就會(huì)可以看出通過設(shè)置absolute/relative的元素優(yōu)先級(jí)都會(huì)高于沒有設(shè)置z-index的元素。
注：如果父元素z-index：0 子元素設(shè)置z-index：-1則子元素則會(huì)顯示出來
結(jié)論.png
所以說，正如自然界很多物質(zhì)一樣。我們無法解釋它的原理，但是可以通過現(xiàn)象來判斷它的屬性。如果這么說起來你聽的有點(diǎn)麻煩，那么我問你:"請(qǐng)問：什么是桌子？" 我想你可能說：上面是個(gè)平板下面有四根腿撐著的木頭叫做桌子.那么接著反問你：板凳算不算是桌子？如果算，為什么不叫板凳是桌子？如果不算，桌子不也是四根腿，一面平板嗎！所以究其本質(zhì)我們可以說：用來吃飯的載體我們可以判斷它就是桌子。
同樣的道理我們可以引申到堆疊上下文，我們只知道一些屬性會(huì)觸發(fā)上下文，但是并不知道堆疊上下文是什么。
所以觸發(fā)堆疊上下文的內(nèi)容有以下：
- 根元素（HTML）
- z-index值不為”auto“的絕對(duì)定位/相對(duì)定位
- 一個(gè) z-index 值不為 "auto"的 flex 項(xiàng)目 (flex item)，即：父元素 display: flex|inline-flex
- opacity 屬性值小于 1 的元素（參考 the specification for opacity）
- transform 屬性值不為 "no ne"的元素
- mix-blend-mode 屬性值不為 "normal"的元素
- filter值不為“none”的元素
- perspective值不為“none”的元素
- isolation 屬性被設(shè)置為 "isolate"的元素
- position: fixed
- 在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值（參考 這篇文章）
- -webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素
image
通過上圖我們可以看出，圖中沒有z-index。但是依然形成了堆疊上下文的效果。之所以引發(fā)這種效果的原因是滿足了堆疊上下文的第一個(gè)條件根元素<html>
其次，如果父元素HTML是一個(gè)家長，是其內(nèi)部都具備堆疊上下文的結(jié)構(gòu)。但是如果給一個(gè)子元素單獨(dú)設(shè)置堆疊上下文，而另一個(gè)子元素沒有設(shè)置堆疊上下文，則沒有設(shè)置堆疊上下文效果的內(nèi)容將會(huì)被掩蓋。
image
上圖解釋了如果兩個(gè)子元素同時(shí)設(shè)置了堆疊上下文那么兩個(gè)子元素則具備兄弟同時(shí)競(jìng)爭，后出現(xiàn)的優(yōu)先級(jí)較高的效果.
最后我們需要考慮到一種最特殊的情況：如果給最高級(jí)元素設(shè)置z-index：-1則后代元素就會(huì)顯示出來，這是因?yàn)榇藭r(shí)的層疊上下文從總體來看是一個(gè)整體，所以后代元素會(huì)顯示出來，而不是被子代或者孫子代掩蓋住。
