当你打开一个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元素的下方。