資訊專欄INFORMATION COLUMN
摘要：為了調整層級順序，我們想到的往往就是用的屬性來控制。規則順序規則在不設置屬性或設置成的情況下，文檔流后面的節點會覆蓋前面的節點。層級樹規則定位節點，且有整數值的不包括，會被放置到一個與節點不一樣的層級樹里。
前言
DOM層級順序，大概來說就是DOM節點在z軸方向（垂直于屏幕向外的方向）的顯示優先級。為了調整DOM層級順序，我們想到的往往就是用CSS的z-index屬性來控制。雖然看著很簡單，但是有時在使用時，我們有時也許會碰到一些一些奇奇怪怪的問題：
為什么有時候將z-index設成很大的值（比如9999），節點依然不能顯示在最前面？
z-index屬性設為0和不設置z-index屬性有什么區別？
float元素和定位元素誰顯示的優先級更高？
其實看似簡單的層級順序它自己的一套規則，理解這些規則可以幫助我們在開發中少踩坑。
規則 1. 順序規則在不設置position屬性（或設置成static）的情況下，文檔流后面的DOM節點會覆蓋前面的DOM節點。
AB
PS：怎么樣來讓文檔流中的節點疊在一起呢？比如我們可以設置DOM的margin-top為負數，這樣就讓兩個節點疊在起一起了。不過為了簡化說明，并沒有把這些寫出來。下同。
2.定位規則定位節點（position屬性設置為relative，absolute或fixed的節點）會覆蓋非定位節點（不設置position屬性或position屬性設為static的節點）
AB
根據順序規則和定位規則, 我們可以做出更加復雜的結構。A和 B 都設為非定位節點，A 的子節點 A-1 設定定位節點。
3. 參與規則AB
z-index屬性僅對定位節點生效。
有三個DOM節點，其定位為static。但是A的z-index最大，但是依舊是在最底部，C的z-index最小，而在最頂部，因此可知z-index并未生效，此時為順序規則在生效。
ABB
我們將B和C的position設置為relative之后，順序發生了變化。根據參與者規則和定位規則，A不是定位節點，所以即使z-index最大，還是在最底部。而根據參與規則和默認值規則（下一節介紹），B和C都是定位節點，且B的z-index要大于C，所以B在最頂部。
4. 默認值規則ABB
對于所有的定位節點，z-index值大的節點會覆蓋z-index值小的節點。
z-index設為0和沒有設置z-index的節點在同一層級內沒有高低之分。在IE6和7種，z-index的默認值為0，其他瀏覽器中默認值為auto。
5. 從父規則ABCD
兩個節點A和B都是定位節點，如果節點A的z-index值比節點B的大，那么節點A的子元素都會覆蓋在節點B以及節點B的子節點上。
A-1B-1
如果定位節點A和B的z-index值一樣大，那么根據順序規則，B會覆蓋A，那么即使A的子節點的z-index比B的子節點大，B的子節點還是會覆蓋A的子節點。(這就是為什么即使我們把A-1的z-index設置得很大，依然無法蓋住B節點的原因)。
6. 層級樹規則A-1B-1
定位節點，且z-index有整數值的（不包括z-index:auto），會被放置到一個與DOM節點不一樣的層級樹里。
在下面的DOM節點中，A和B是兄弟節點，但是在層級樹種，A和B-1才是兄弟節點（因為他們都是Root下的第一層含有整數z-index的定位節點），所以A在B和B-1之上。雖然A-1的z-index比B-1的小，但是根據從父規則，A-1也在B-1之上。
A-1B-1
下面這個更復雜的層級樹，聰明的你能看明白為什么節點層級是這樣的了嗎？
層疊上下文A-1B-1-1C-1-1-1
介紹了這么多規則，是在是不好理解，又很難記。其實，要理解這些規則，我們只需要理解一個概念就行了，它就是層疊上下文。
概念層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網頁的用戶的z軸上延伸，HTML元素依據其自身屬性按照優先級順序占用層疊上下文的空間。
特性子元素的 z-index 值只在父級層疊上下文中有意義。
子級層疊上下文被自動視為父級層疊上下文的一個獨立單元。
產生的條件滿足一下其中一個條件，即可產生一個層疊上下文：
根元素 (HTML),
z-index 值不為 "auto"的 絕對/相對定位，
position: fixed
opacity 屬性值小于 1 的元素
transform 屬性值不為 "none"的元素
filter值不為“none”的元素
-webkit-overflow-scrolling 屬性被設置 "touch"的元素
附錄：層疊的順序表| 位置 | 描述 | CSS |
|---|---|---|
| 1（底部） | 包含該層疊上下文的父元素 | |
| 2 | 負堆疊順序的子元素 | z-index: |
| 3 | 文檔流中，非內聯，非定位子元素 | display: /* not inline */; position: static |
| 4 | 非定位浮動子元素 | float: left (or right); position: static |
| 5 | 內聯流，非定位子元素 | display: inline; position: static |
| 6 | 堆疊順序為0的子元素 | z-index: auto (or 0); position: position: relative(or absolute or fixed) |
| 7（頂部） | 堆疊順序為正的子元素 | z-index: |
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116682.html
摘要：層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制于外部的層疊上下文。例當按以下設置，則出現紅色在綠色之上的效果。如何觸發觸發一個元素形成層疊上下文有以下方法，摘自根元素值不為的絕對相對定位一個值不為的項目，即父元素。 層疊上下文【stacking context】 對于stacking context，在MDN中的描述是 Stacking context is the three...
摘要：元素層疊順序補充說明位于最下面的特指層疊上下文元素后面會詳解的邊框和背景色。界中可能有其他的層疊結界，而自身也可能處于其他層疊結界中。 上一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內容，這里僅把后面章節相對重要的內容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說...
摘要：當第二層的容器盒子升級為層疊上下文時，紅色盒子及灰色盒子的軸層級受制于第二層的容器盒子。當元素處于同一層疊上下文內時可按照如下規則進行層疊判斷。 本文首發于政采云前端團隊博客：CSS 層疊上下文（Stacking Context） 在網頁制作的過程中，元素與元素之間的位置關系，在坐標軸上一般可體現為 X 軸、Y 軸和 Z 軸。對于 X 軸和 Y 軸的定位大多數開發都能比較直觀的搞清楚...
摘要：后來居上當元素的層疊水平一致層疊順序相同的時候，在流中處于后面的元素會覆蓋前面的元素。相關連接深入理解中的層疊上下文和層疊順序層疊順序探究分層的顯示 什么是層疊上下文（stacking context） 可以理解為一個dom節點在Z軸高人一等，特性類似于BFC，即層疊上下文的內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。 CSS2創建層疊上下文的兩種方法（參考MDN） 根元...
摘要：栗子有兩個，被包裹在一個里，被包裹在另一個盒子里，同時為兩個和設置和屬性效果我們發下，雖然元素的值為，遠大于和的值，但是由于的父元素產生的層疊上下文的的值為，的父元素所產生的層疊上下文的值為，所以永遠在和下面。 前言 最近，在項目中遇到一個關于CSS中元素z-index屬性的問題，具體問題不太好描述，總結起來就是當給元素和父元素色設置position屬性和z-index相關屬性后，頁面...
閱讀 2470·2023-04-25 21:41
閱讀 1647·2021-09-22 15:17
閱讀 1920·2021-09-22 10:02
閱讀 2432·2021-09-10 11:21
閱讀 2569·2019-08-30 15:53
閱讀 996·2019-08-30 15:44
閱讀 946·2019-08-30 13:46
閱讀 1123·2019-08-29 18:36
