可能并不是那么顯而易見，但是HTML文檔中的元素卻是存在于三個維度之中。除了大家熟知的平面畫布中的x軸和y軸，還有控制第三維度的z軸。

像 margin , float , offset 這些屬性，控制著元素在x軸和y軸上的表現(xiàn)形式一樣。 z-index 這個屬性控制著元素在z軸上的表現(xiàn)形式。

z-index屬性

z-index屬性指定兩件事:

當(dāng)前元素的堆疊順序

當(dāng)前元素是否建立新的堆疊上下文

該屬性僅適用于定位元素。即擁有 relative, absolute, fixed屬性的 position 元素。

z-index屬性有三個可能的值:

值

描述

auto

默認。堆疊順序與父元素相等。

< integer >

設(shè)置元素的堆疊順序。

inherit

規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。

z-index: auto | | inherit

堆疊順序(Stacking Level)

堆疊順序是當(dāng)前元素位于z軸上的值。數(shù)值越大表明元素的堆疊順序越高，越靠近屏幕。

如果未指定 z-index 的屬性，元素的堆疊順序基于它所在的文檔樹。默認情況下，文檔中后來聲明的元素具有更高的堆疊順序。

計算堆疊順序

除了指定的 z-index，元素的堆疊順序是由大量的因素控制的。元素按照下面表格順序進行堆疊。

位置

描述

CSS

1 (bottom)

元素構(gòu)成堆疊上下文

z-index: < integer >

2

負堆疊順序的子元素

z-index: < negative integer > position: relative | absolute | fixed

3

文檔流中，非內(nèi)聯(lián)，非定位子元素

display: /* not inline */ position: static

4

非定位浮動子元素

float: left | right position: static

5

內(nèi)聯(lián)流，非定位子元素

display: /* inline */ position: static

6

堆疊順序為0的子元素

z-index: auto | 0 position: relative | absolute | fixed

7(top)

堆疊順序為正的子元素

z-index: < position intege > position: relative | absolute | fixed

堆疊上下文(Stacking Contex)

當(dāng)我們用 z-index 屬性指定元素的堆疊順序時，我們并不總是指定這個元素的堆疊順序相關(guān)于頁面內(nèi)的其他元素。元素的堆疊順序只是相關(guān)于其堆疊上下文。

這可能會導(dǎo)致一些奇怪的情況，比如具有較大 z-index 的元素并不總是位于具有較低 z-index 元素的上方。

可以用下面的規(guī)則解釋堆疊上下文。

默認堆疊上下文是根元素

任何HTML文檔默認的堆疊上下文都是 元素。因此，除非創(chuàng)建新的堆疊上下文，默認情況下，元素的堆疊順序相關(guān)于頁面內(nèi)的其他元素。

用 z-index 屬性建立一個新的堆疊上下文

我們是通過為一個元素的 z-index 屬性設(shè)置一個整數(shù)值來建立新的堆疊上下文。為達到預(yù)期效果，首先，設(shè)置該整數(shù)為當(dāng)前元素的堆疊順序，其次，創(chuàng)建一個新的堆疊上下文。

新的堆疊上下文適用于該元素的任何子元素。子元素只和這個層堆疊上下文有關(guān)，和根堆疊上下文無關(guān)。

在下面的示例中，.foo 屬于堆疊上下文 1，而.bar 屬于堆疊上下文 2。

元素的堆疊順序不能高于 (或低于) 父元素的堆疊順序

當(dāng)父元素的堆疊順序被設(shè)置的時候，這也意味著，它的子元素的堆疊順序不能高于或低于這一順序 (相對于父元素的堆疊上下文)。

在下面的示例中，即使 .bar 的 z-index 值高于 .baz，它依然顯示 .baz 下方。這是因為，在堆疊上下文1中，.bar 不能高于或低于堆疊順序1。

.foo { z-index: 1; }

.bar { z-index: 1000; }

.baz { z-index: 2; }

在校學(xué)生，本科計算機專業(yè)。一個積極進取、愛笑的女生，熱愛前端，喜歡與人交流分享。想要通過自己的努力做到心中的那個自己。微博：@靜-如秋葉

總結(jié)

以上是生活随笔為你收集整理的css3 z-index,z-index的工作原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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