z-index

z-index属性用于控制元素的堆叠顺序,即控制元素的前后关系。
它有以下几个特点:

1. 只作用于定位(position)为不是static的元素,对static元素无效。常见的定位有relative、absolute、fixed等。

2. 可以设置整数、auto关键字的值。整数值越大,元素堆叠的越上面。auto关键字则表示采用父元素的z-index值。

3. 只对堆叠上下文(stacking context)有效。堆叠上下文由块级元素以及包含绝对/相对定位的元素创建。z-index会在同一堆叠上下文内进行比较。

4. 当两个元素具有相同的z-index时,它们的堆叠顺序由其在DOM树中的顺序决定。

5. z-index的值可以为负值,负值会被当作较小的值对待。

例如:

html
<div style="position: relative; z-index: 2;">
  <div style="position: absolute;">z-index: 1</div>
</div>
<div style="position: relative; z-index: 3;">
  <div style="position: absolute;">z-index: 2</div> 
</div>

这里有两个相对定位的父元素,都包含绝对定位的子元素。根据z-index,堆叠顺序从上到下为:
z-index: 3
z-index: 2
z-index: 2 (同值为2,DOM顺序在后,所以堆叠在上)
z-index: 1

如果再加一个父元素:

html
<div style="position: relative; z-index: 6;">
  <div style="position: absolute;">z-index: 5</div> 
</div>

<div style="position: relative; z-index: 2;">  
  <div style="position: absolute;">z-index: 1</div>
</div>  

<div style="position: relative; z-index: 3;">
  <div style="position: absolute;">z-index: 2</div>  
</div>

那么完整的堆叠顺序为:
z-index: 6
z-index: 5
z-index: 3
z-index: 2
z-index: 2
z-index: 1

z-index允许负值,所以这里即便z-index: 2在3的后面,仍然会堆叠在其上面。

所以,z-index主要用于控制定位元素的前后堆叠顺序,它在 responsive 布局和凸显重要元素方面都有很好的应用。但在使用时需要注意它只对定位元素有效,且值较大不一定能达到想要的堆叠效果,还需要考虑DOM顺序等因素。