DOM層級順序與z index

dom層級順序，大概來說就是dom節點在z軸方向（垂直於螢幕向外的方向）的顯示優先順序。為了調整dom層級順序，我們想到的往往就是用css的z-index屬性來控制。雖然看著很簡單，但是有時在使用時，我們有時也許會碰到一些一些奇奇怪怪的問題：

其實看似簡單的層級順序它自己的一套規則，理解這些規則可以幫助我們在開發中少踩坑。

在不設定position屬性（或設定成static）的情況下，文件流後面的dom節點會覆蓋前面的dom節點。

ps：怎麼樣來讓文件流中的節點疊在一起呢？比如我們可以設定dom的margin-top為負數，這樣就讓兩個節點疊在起一起了。不過為了簡化說明，並沒有把這些寫出來。下同。

定位節點（position屬性設定為relative，absolute或fixed的節點）會覆蓋非定位節點（不設定position屬性或position屬性設為static的節點）

根據順序規則和定位規則, 我們可以做出更加複雜的結構。a和 b 都設為非定位節點，a 的子節點 a-1 設定定位節點。

z-index屬性僅對定位節點生效。

有三個dom節點，其定位為static。但是a的z-index最大，但是依舊是在最底部，c的z-index最小，而在最頂部，因此可知z-index並未生效，此時為順序規則在生效。

我們將b和c的position設定為relative之後，順序發生了變化。根據參與者規則和定位規則，a不是定位節點，所以即使z-index最大，還是在最底部。而根據參與規則和預設值規則（下一節介紹），b和c都是定位節點，且b的z-index要大於c，所以b在最頂部。

兩個節點a和b都是定位節點，如果節點a的z-index值比節點b的大，那麼節點a的子元素都會覆蓋在節點b以及節點b的子節點上。

如果定位節點a和b的z-index值一樣大，那麼根據順序規則，b會覆蓋a，那麼即使a的子節點的z-index比b的子節點大，b的子節點還是會覆蓋a的子節點。(這就是為什麼即使我們把a-1的z-index設定得很大，依然無法蓋住b節點的原因)。

定位節點，且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-1 b-1-1 c-1-1-1

介紹了這麼多規則，是在是不好理解，又很難記。其實，要理解這些規則，我們只需要理解乙個概念就行了，它就是層疊上下文。

層疊上下文是html元素的三維概念，這些html元素在一條假想的相對於面向（電腦螢幕的）視窗或者網頁的使用者的z軸上延伸，html元素依據其自身屬性按照優先順序順序占用層疊上下文的空間。

滿足一下其中乙個條件，即可產生乙個層疊上下文：

位置描述

css1（底部）

包含該層疊上下文的父元素

2負堆疊順序的子元素

z-index: ; position: relative (or absolute or fixed)

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: ; position: relative(or absolute or fixed)