html5 index属性,深入理解CSS z-index属性

当你打开一个HTML页面的时候，你会不会注意到其实页面上的元素都是处于3D空间中的？HTML页面上的每一个元素不仅有X轴和Y轴属性，它还具有Z轴属性。

CSS属性margin、float和其它位置属性控制元素的X和Y轴，而z-index属性则专门用于控制元素在Z轴上的显示。

z-index属性

z-index属性指定2个方面的内容：

1、元素的堆叠级别。

2、元素的堆叠上下文。

z-index属性只能够应用在display属性为relative、absolute或fixed的元素上。

z-index属性有3个可能的取值：

取值

描述

auto

设置堆叠的级别为0，并且不建立新的堆叠上下文

设置一个整数堆叠级别，并且建立一个新的堆叠上下文

inherit

设置和父元素相同的堆叠级别，不建立新的堆叠上下文

z-index: auto | | inherit

堆叠级别

堆叠级别是元素在Z轴上的取值。值越大，堆叠级别越高，堆叠级别高的元素位于堆叠级别低的元素之上，级别越高的元素越接近屏幕的显示平面。

如果一个元素没有指定z-index属性，那么它的堆叠级别根据它在文档树中的位置来决定。在文档树中，越后声明的元素堆叠级别越高。

计算堆叠级别

除了指定z-index属性之外，一个元素的堆叠级别还被其他一些因素所控制，元素按照以下的顺序进行堆叠：

位置

描述

CSS

1(下方)

构成堆叠上下文的元素

z-index:

2

堆叠级别为负数的子元素

z-index:

position: relative | absolute | fixed

3

在文档流中，非浮动，非特殊定位的子元素

display: /* not inline */

position: static

4

非特殊定位的浮动子元素

float: left | right

position: static

5

在文档流中非特殊定位的内联子元素

display: /* inline */

position: static

6

堆叠级别为0的子元素

z-index: auto | 0

position: relative | absolute | fixed

7(上方)

堆叠级别为正数的子元素

z-index:

position: relative | absolute | fixed

堆叠上下文

当我们使用z-index属性为一个元素指定堆叠级别的时候，我们通常不会指定这个元素和页面中所有元素的堆叠关系。元素的堆叠级别仅仅和它的堆叠上下文有关。

这种情况可能会导致一些奇怪的问题发生：一个z-index值较大的元素会位于一个z-index值较小的元素的下面。

那么什么是堆叠上下文呢？可以通过下面3个方面来理解堆叠上下文。

1、默认的堆叠上下文是文档的root元素

默认的堆叠上下文是HTML文档的根元素。所以，除非建立了新的堆叠上下文，否则元素的堆叠级别和页面中的其它元素都有关系。

2、可以通过z-index属性建立一个新的堆叠上下文

我们可以通过设置一个元素的z-index属性来建立一个新的堆叠上下文。这个新的堆叠上下文会影响这个元素的所有子元素。所有子元素的堆叠级别都会在这个新的堆叠上下文中，而不是在文档的根元素中。

例如下面的这张图中，.foo元素位于堆叠上下文1中，而.bar元素则是位于堆叠上下文2中。

3、子元素不能够在父元素的堆叠级别之上或之下

当父元素的堆叠级别被设定之后，它的所有子元素都不能位于这个堆叠级别的上面或下面。

例如下面的例子中，虽然.bar元素的z-index要高于.baz元素，但是它还是位于.baz元素的下方。这是因为.bar元素是.foo元素的子元素，而.foo元素的z-index为1，.baz元素的z-index为2，它们都处于堆叠上下文1中，.baz元素要高于.foo元素。作为.foo元素子元素的.bar元素的z-index不能高于它的父元素，所以它位于.baz元素的下方。