為方便以后查閱，先上鎮(zhèn)樓圖，來自神作：

?

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

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

后來居上：當元素的層疊水平一致、層疊順序相同的時候，在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的文字超出容器，原本按照“后來居上”的規(guī)則，div2應(yīng)該是可以把div1遮蓋的，但實際上，div1中的文字似乎擠到了div2的背景和文字之間。

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

【示例2】

將div1中的文字以一個新的

標簽包裹。

?

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

看完全文再來看：3個div都是block層，遵循后來居上的規(guī)則，文字都是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中的文字其實已經(jīng)不再和div或其他元素比較層疊順序了，而是在div2中的子項之間比較)

【示例4】

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

?

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

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

【示例5】

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

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

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

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

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

【層疊上下文】(stacking context)

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

【層疊上下文特性】

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

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

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

【產(chǎn)生層疊上下文的條件】

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

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

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

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

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

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

見鎮(zhèn)樓圖。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。