元素上下層疊關係總結

時間 2019-12-05

標籤元素上下層疊關係總結简体版

原文原文鏈接

從瀏覽器渲染提及

一個頁面的渲染，大體有下幾個步驟css

這裏直接看最後一步Composite: 渲染層合併，這步是渲染最後一個步驟，做用就是把以前繪製的圖層（若是有PS的經驗的話圖層很好理解）按照規定的順序合併成一個圖層，元素的層疊誰在上面誰在下面的關係，就在這步裏被規定被最終在瀏覽器裏體現出來了。html

那麼這個對層疊理解有什麼用呢？。。。。。。。。。。並沒什麼卵用，只是最近看到了而已，科科，直接進入正題吧，我的總結，會比較亂。瀏覽器

開頭掛兩篇大神的文章保智商ide

其實看完上面兩篇基本就夠了，不過若是你實在閒的慌又想繞一下本身，好嘞，當我沒說，請繼續觀賞
flex

普通`我上仍是你上`的幾種體位

簡單說幾種常見狀況：spa

文檔中後來的居上翻譯

結構以下，這裏默認box都有長寬和不一樣的背景顏色code

<div class="you"></div>
<div class="me"></div>

很顯然若是我有一個負值margin就會看到我上你下的狀況

z-index正值>auto(0)>負值前面的居上

這裏首先要明白的是z-index只針對position不是static的元素起做用。因此咱們這裏提及z-index，那這個元素必定是和position一塊兒使用。而若是隻指定position，那麼該元素會默認z-index:auto, have a look

<div class="you"></div>
<div class="me"></div>
<style>
.you {
    position: relative;
}
.me {
    position: relaive;
    z-index: -1;
    margin-top: -10px;
}  
</style>

嗯，這裏就你上我下了

float的元素和position不爲static的元素比普通文檔流的居上

就不演示了！

好了，上面的四種狀況算是最正常也是比較容易理解的狀況了吧，那麼問題就來了,若是我float了和你z-index: -1了發生重疊呢？若是你z-inidex: auto又或z-inidex: 1了呢？是否是要愣一下呢哈哈哈，不急，看個寶貝。

嗒噠，什麼屬性的元素有什麼樣的層疊等級，按照這張圖上面的問題就簡單了，float在負值z-index上，在auto或正值之下。咦？這裏咋還有inline-block的事呢，還這麼高等級捏？？這是由於內容要大於佈局，不展開(頂部有鑫旭大神的文章，裏面有作介紹)。

OK，我想是時候迎接這篇文章的高潮了，有孩子的抱穩了！上圖中位於最底層的層疊上下文五個大字看到沒有？目前咱們都是把要比較元素放在以同一個層疊上下文爲基底的環境內作比較，可是全部元素都會在這一個環境內嗎？咳咳，我喝口水慢慢噴：

一個重要的概念——層疊上下文（stacking context）

不得不說這個詞對於我這樣的人從中文上理解簡直是十臉懵逼

上下文？context？WTF？好吧，其實這東西是一個抽象的概念，若是讓我來翻譯它，我以爲比較合適的解釋：建立層疊上下文的元素本身會成爲一個參考對象。

既然是一個參考對象，那麼誰來參考它呢？答案是它的子元素們（其實這並非徹底正確，可是能夠先這麼認爲）。而後這個參考對象何時會被用到呢？

直接乾巴巴的說個情景：

頁面裏你隨便找兩個元素(爲了區分就是我和你吧)，若是我和你要比較誰更高人一等怎麼辦呢？

瀏覽器會作的就是不斷向上檢索祖輩元素，直到這個祖輩建立過層疊上下文(也就是這個祖輩能夠當作參考對象)。
獲得了兩個元素各自的參考對象（這裏稱呼爲我爸爸和你爸爸）而後呢，這時就分兩種狀況！分兩種狀況！分兩種狀況：
若是我爸爸和你爸爸是一我的！OK,這時我和你就是在一個層疊上下文中了，就能夠按照上面盜來的層疊等級圖進行誰上誰下的判斷了
若是是不同的呢？？？那事情就變得有趣多了——我和你就不!會!去!進!行!比!較!了!！。這場較量一會兒會變成我爸爸和你爸爸間的戰鬥了（嘿，你崽子敢動我崽子。動你崽子咋滴啦，你不服咱兩幹啊。幹！）
而後他們兩就幹起來了，他們兩乾的方式就和我和你同樣，去找各自參考對象——獲得我爺爺和你爺爺。而後來看是否同一我的，若是是的話我爸爸和你爸爸就是在一個層疊上下文中了，就會在爺爺輩這個參考對象上比出個高低，而這個高低！就是我和你的高低，換句話說就是高低由我和你的參考對象決定了。若是我爺爺和你爺爺仍是不同呢.....Go on

講的有點繞是否是，不要緊！再聽我講幾句，你會更暈的

接下來講誰會是 `參考對象`（建立了層疊上下文）

html自然就是，這就能夠去把前面那些簡單的例子套進來了，由於它們的參考對象都是html根元素了，因此能夠直接在同一環境（上下文）比較。
position不爲static且z-index不是auto的元素
display爲flex且z-index不是auto的元素
opacity不等於1
transform不等於none

好了，到這個時候就該上例子了：

<html>
    <div class="me">
        <div class="you"></div>
    </div>
</html>
<style>
.me {
   width: 100px;
   height: 100px;
}
.you {
    width: 100px;
    height: 100px;
    left: 50px;
    position: relative;
    z-index: -1;
}
</style>

來理解下，you在這裏和me作比較，比較開始，首先you尋找參考對象，上一層me是嗎？顯然不是，由於me沒有觸發上面任一條件建立層疊上下文，因此繼續往上尋找，找到html，好的，是！

對於me呢，也直接往上找到html，因此這個例子裏me和you是在以html爲參考對象進行比較，換句話說就是在html建立的層疊上下文環境中進行比較！

而後按照七階圖，負值index在block元素之下！因此me在you之上

而後咱們修改下me,加個。。。就加個opacity吧

.me {
    opacity: .9;
    width: 100px;
    height: 100px;
}

按照以前的思路演算一遍，you的參考對象變成me了！而me仍然是html，而後me和html再作比較，me參考對象是html，html的參考對象是html，OK，在同一上下文了，me（you的爸爸）明顯高於html（me的爸爸），因此you高於me

就不舉複雜的例子了，其實都同樣，我本身在用這個規則去分析的時候感受會很清晰！好吧這就是爛尾。。。

有錯誤或者寫的爛歡迎指出來批評討論！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。