DOM層級順序與z-index

Amio 發(fā)布于2019-08-30 15:53 / 2584人閱讀

摘要：為了調(diào)整層級順序，我們想到的往往就是用的屬性來控制。規(guī)則順序規(guī)則在不設(shè)置屬性或設(shè)置成的情況下，文檔流后面的節(jié)點(diǎn)會(huì)覆蓋前面的節(jié)點(diǎn)。層級樹規(guī)則定位節(jié)點(diǎn)，且有整數(shù)值的不包括，會(huì)被放置到一個(gè)與節(jié)點(diǎn)不一樣的層級樹里。

前言

DOM層級順序，大概來說就是DOM節(jié)點(diǎn)在z軸方向（垂直于屏幕向外的方向）的顯示優(yōu)先級。為了調(diào)整DOM層級順序，我們想到的往往就是用CSS的z-index屬性來控制。雖然看著很簡單，但是有時(shí)在使用時(shí)，我們有時(shí)也許會(huì)碰到一些一些奇奇怪怪的問題：

為什么有時(shí)候?qū)-index設(shè)成很大的值（比如9999），節(jié)點(diǎn)依然不能顯示在最前面？

z-index屬性設(shè)為0和不設(shè)置z-index屬性有什么區(qū)別？

float元素和定位元素誰顯示的優(yōu)先級更高？

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

規(guī)則 1. 順序規(guī)則

在不設(shè)置position屬性（或設(shè)置成static）的情況下，文檔流后面的DOM節(jié)點(diǎn)會(huì)覆蓋前面的DOM節(jié)點(diǎn)。

A
B

PS：怎么樣來讓文檔流中的節(jié)點(diǎn)疊在一起呢？比如我們可以設(shè)置DOM的margin-top為負(fù)數(shù)，這樣就讓兩個(gè)節(jié)點(diǎn)疊在起一起了。不過為了簡化說明，并沒有把這些寫出來。下同。

2.定位規(guī)則

定位節(jié)點(diǎn)（position屬性設(shè)置為relative，absolute或fixed的節(jié)點(diǎn)）會(huì)覆蓋非定位節(jié)點(diǎn)（不設(shè)置position屬性或position屬性設(shè)為static的節(jié)點(diǎn)）

A
B

根據(jù)順序規(guī)則和定位規(guī)則, 我們可以做出更加復(fù)雜的結(jié)構(gòu)。A和 B 都設(shè)為非定位節(jié)點(diǎn)，A 的子節(jié)點(diǎn) A-1 設(shè)定定位節(jié)點(diǎn)。


    A

B

3. 參與規(guī)則

z-index屬性僅對定位節(jié)點(diǎn)生效。

有三個(gè)DOM節(jié)點(diǎn)，其定位為static。但是A的z-index最大，但是依舊是在最底部，C的z-index最小，而在最頂部，因此可知z-index并未生效，此時(shí)為順序規(guī)則在生效。

A
B
B

我們將B和C的position設(shè)置為relative之后，順序發(fā)生了變化。根據(jù)參與者規(guī)則和定位規(guī)則，A不是定位節(jié)點(diǎn)，所以即使z-index最大，還是在最底部。而根據(jù)參與規(guī)則和默認(rèn)值規(guī)則（下一節(jié)介紹），B和C都是定位節(jié)點(diǎn)，且B的z-index要大于C，所以B在最頂部。

A
B
B

4. 默認(rèn)值規(guī)則

對于所有的定位節(jié)點(diǎn)，z-index值大的節(jié)點(diǎn)會(huì)覆蓋z-index值小的節(jié)點(diǎn)。

z-index設(shè)為0和沒有設(shè)置z-index的節(jié)點(diǎn)在同一層級內(nèi)沒有高低之分。在IE6和7種，z-index的默認(rèn)值為0，其他瀏覽器中默認(rèn)值為auto。

A
B
C
D

5. 從父規(guī)則

兩個(gè)節(jié)點(diǎn)A和B都是定位節(jié)點(diǎn)，如果節(jié)點(diǎn)A的z-index值比節(jié)點(diǎn)B的大，那么節(jié)點(diǎn)A的子元素都會(huì)覆蓋在節(jié)點(diǎn)B以及節(jié)點(diǎn)B的子節(jié)點(diǎn)上。


    A-1


    B-1

如果定位節(jié)點(diǎn)A和B的z-index值一樣大，那么根據(jù)順序規(guī)則，B會(huì)覆蓋A，那么即使A的子節(jié)點(diǎn)的z-index比B的子節(jié)點(diǎn)大，B的子節(jié)點(diǎn)還是會(huì)覆蓋A的子節(jié)點(diǎn)。(這就是為什么即使我們把A-1的z-index設(shè)置得很大，依然無法蓋住B節(jié)點(diǎn)的原因)。


    A-1


    B-1

6. 層級樹規(guī)則

定位節(jié)點(diǎn)，且z-index有整數(shù)值的（不包括z-index:auto），會(huì)被放置到一個(gè)與DOM節(jié)點(diǎn)不一樣的層級樹里。

在下面的DOM節(jié)點(diǎn)中，A和B是兄弟節(jié)點(diǎn)，但是在層級樹種，A和B-1才是兄弟節(jié)點(diǎn)（因?yàn)樗麄兌际荝oot下的第一層含有整數(shù)z-index的定位節(jié)點(diǎn)），所以A在B和B-1之上。雖然A-1的z-index比B-1的小，但是根據(jù)從父規(guī)則，A-1也在B-1之上。


    A-1


    B-1

下面這個(gè)更復(fù)雜的層級樹，聰明的你能看明白為什么節(jié)點(diǎn)層級是這樣的了嗎？

層疊上下文

介紹了這么多規(guī)則，是在是不好理解，又很難記。其實(shí)，要理解這些規(guī)則，我們只需要理解一個(gè)概念就行了，它就是層疊上下文。

概念

層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網(wǎng)頁的用戶的z軸上延伸，HTML元素依據(jù)其自身屬性按照優(yōu)先級順序占用層疊上下文的空間。

特性

子元素的 z-index 值只在父級層疊上下文中有意義。

子級層疊上下文被自動(dòng)視為父級層疊上下文的一個(gè)獨(dú)立單元。

產(chǎn)生的條件

滿足一下其中一個(gè)條件，即可產(chǎn)生一個(gè)層疊上下文：

根元素 (HTML),

z-index 值不為 "auto"的絕對/相對定位，

position: fixed

opacity 屬性值小于 1 的元素

transform 屬性值不為 "none"的元素

filter值不為“none”的元素

-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素

附錄：層疊的順序表

位置	描述	CSS
1（底部）	包含該層疊上下文的父元素
2	負(fù)堆疊順序的子元素	z-index: ; position: relative (or absolute or fixed)
3	文檔流中，非內(nèi)聯(lián)，非定位子元素	*display: / not inline /; position: static*
4	非定位浮動(dòng)子元素	float: left (or right); position: static
5	內(nèi)聯(lián)流，非定位子元素	display: inline; position: static
6	堆疊順序?yàn)?的子元素	z-index: auto (or 0); position: position: relative(or absolute or fixed)
7（頂部）	堆疊順序?yàn)檎淖釉?/td>	z-index: ; position: relative(or absolute or fixed)