為方便以后查閱，先上鎮樓圖，來自神作：

?

【黃金法則】在同一層疊水平上的元素，排列時遵循以下規則：

誰大誰上：有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。

后來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。

=====?引起思考的代碼 =====

【示例1】

body{ font-size:100px; font-weight:bold;}

#div1{

height:50px; width:100%;

background:pink;

color:red;

}

#div2{

height:60px; width:100%;

background:yellow;

color:blue;

}

第一個div第二個div

效果如下：

?

div1的文字超出容器，原本按照“后來居上”的規則，div2應該是可以把div1遮蓋的，但實際上，div1中的文字似乎擠到了div2的背景和文字之間。

看完全文再來看：沒有新創建層疊上下文，都在根層疊上下文中，按層疊順序排列，inline的文字在block上方。

【示例2】

將div1中的文字以一個新的

標簽包裹。

?

div3將被div2遮擋，但文字仍然在div2的背景與文字之間。

看完全文再來看：3個div都是block層，遵循后來居上的規則，文字都是inline，在block之上。

【示例3】

將div1浮動float:left。

?

div2的背景由于div1浮動脫離文檔流，來到了div1原始的位置，文字還保持在原位，而div1的文字依然在div2的文字與背景之間。

看完全文再來看：div1成為float層，到div2之上，文本依然都是inline。

【示例3】

將div2浮動float:left。

?

div2的文字被div1的文字遮擋了。

看完全文再來看：div2成為float層，文本被div1的文本遮擋。(此處神圖無法解釋，我猜想float也可以形成層疊上下文，也就是說div2中的文字其實已經不再和div或其他元素比較層疊順序了，而是在div2中的子項之間比較)

【示例4】

將div1和div2同時浮動float:left。

?

div2把div1包括文字都遮擋了。

看完全文再來看：div1，div2都成為float層，div2后來居上。(div1的文字被遮擋可能是因為示例3中的猜測，float后，內部的元素成為一個整體參與順序的排列)

【示例5】

將div2設置position:relative，效果同【示例4】。

看完全文再來看：div2設置為position:relative后，自動有了z-index值，即auto,所以比inline的順序更高。

測了半天之后，我完全混亂了。和同事討論了一下，似乎都找不到一個比較可信的理由解釋這些現象，包括網上一些關于float的說明也被挖出來，但我始終覺得怪怪的。

最后找到了文章頂部鏈接的神作。

=============== ?初步理解? ================

【層疊上下文】(stacking context)

可以把它看成一種容器，其中可以嵌套其他層疊上下文，又各自與它的兄弟獨立，自成體系。每個層疊上下文中的元素，按照一定的層疊水平排列，體現為元素靠近用戶的程度。

【層疊上下文特性】

1 層疊水平比普通元素高——更靠近用戶；

2 每個層疊上下文與兄弟獨立，也就是當進行層變化或渲染的時候，只需要考慮后代元素；

3 每個層疊上下文自成體系，當其發生層疊時，在父層疊上下文中以整個元素加入到層疊順序中。

【產生層疊上下文的條件】

1 頁面根元素本身就是一個層疊上下文；

2 position 為 absolute/relative/fixed 且 z-index 為數值的元素也會形成層疊上下文；

- webkit 內核的瀏覽器中近來將 fixed 元素默認形成了層疊上下文，id/firefox 中仍需要 z-index 為數值。

3 css3屬性影響形成的層疊上下文(此處暫不討論，有興趣可以參見神作，其中有詳細描述)

4???(根據自己的測試代碼得出，正確性有待驗證)float元素中不創建層疊上下文的子元素，會成為float元素的整體，而不會單獨比較再參與上一級層疊上下文的層疊順序。

【層疊上下文中的層疊水平】

見鎮樓圖。

所以在引發這個問題的研究的例子中，div1和div2都在同一個層疊上下文中，并且沒有形成新的層疊上下文，所以他們全部的內容都會按照上面那張圖中的順序排列，相同類型(div1和div2都是block，其中的內容都是inline)的元素按照我們熟知的“后來居上，誰大誰上”的原則排列。因此，div1的文字比block的div2層級高，但和div2中文字的層級一致，由于先到，所以就只能被遮擋了。

同時，這個原理也同樣可以說明，為什么div1浮動后，div2的背景到div1后面，div1的字卻在div1與div2的字之間。

總結

以上是生活随笔為你收集整理的div后来居上 html,【CSS】误解：后来居上？？有时这是错的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。