元素上下层叠关系总结
從瀏覽器渲染說起
一個頁面的渲染，大致有下幾個步驟
這里直接看最后一步Composite: 渲染層合并，這步是渲染最后一個步驟，作用就是把之前繪制的圖層（如果有PS的經驗的話圖層很好理解）按照規定的順序合并成一個圖層，元素的層疊誰在上面誰在下面的關系，就在這步里被規定被最終在瀏覽器里體現出來了。
那么這個對層疊理解有什么用呢？。。。。。。。。。。并沒什么卵用，只是最近看到了而已，科科，直接進入正題吧，個人總結，會比較亂。
<!-- more-->
開頭掛兩篇大神的文章保智商
鑫旭大神的深入理解CSS中的層疊上下文和層疊順序
吹雪大大的不起眼的 z-index 卻能牽扯出這么大的學問
其實看完上面兩篇基本就夠了，不過如果你實在閑的慌又想繞一下自己，好嘞，當我沒說，請繼續觀賞
普通我上還是你上的幾種體位
簡單說幾種常見情況：
文檔中后來的居上
結構如下，這里默認box都有長寬和不同的背景顏色
<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
就不舉復雜的例子了，其實都一樣，我自己在用這個規則去分析的時候感覺會很清晰！好吧這就是爛尾。。。
有錯誤或者寫的爛歡迎指出來批評討論！
總結
以上是生活随笔為你收集整理的元素上下层叠关系总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 企业级账号 版本更新总结
- 下一篇： ntp时间同步服务器配置