1. 什么是z-index
在CSS中，一个元素的z-index指定了这个元素在页面叠加顺序中的位置。具体来说，就是当多个元素发生重叠时，z-index决定了哪个元素显示在最上面。
1.1 z-index的属性值
- auto：默认值，元素叠放顺序和HTML中一样
- number：指定一个数字，数值大的元素会显示在数值小的元素上方
- inherit：继承父元素的z-index属性值
1.2 z-index的取值范围
- auto：0
- 绝对定位元素：正整数
- 相对定位元素：0
- 其他元素：auto
2. z-index的层级
在CSS中，z-index的层级存在一个基本关系，层级高的元素在叠加时会盖住层级低的元素。这个基本关系如下：
2.1 最高级别: 元素独立成层
利用CSS的 `transform` 或 `filter` 属性，可以让元素脱离文档流单独成为一层，独立显示于其他元素之上。
.layer {
position: fixed;
top: 0;
left: 0;
transform: translateZ(9999px);
/* 或者 filter:blur(0px) / opacity:0.99 */
}
2.2 第二级别：定位元素
定位元素的层级由z-index属性决定，数值越大层级越高。
.box1 {
position: relative;
z-index: 2;
}
.box2 {
position: relative;
z-index: 1;
}
2.3 第三级别：浮动元素
不管是使用浮动还是使用clear清除浮动，都不会影响浮动元素的层级。
2.4 第四级别：普通元素
没有设置z-index或者z-index为auto的元素层级最低，会被其他层级高的元素盖住。
3. z-index注意事项
虽然z-index看似简单易用，但还是有一些需要注意的问题。
3.1 祖先元素的影响
子元素的z-index相对于父元素而言，如果子元素的z-index值大于父元素的z-index值，那么子元素会盖住父元素。如果祖先元素的z-index值比自己低，则祖先元素会导致自己的z-index失效。
3.2 子元素的影响
如果两个子元素的z-index值同时大于它们的父元素的z-indexD，则它们会在自己之间按照出现的顺序展示。
3.3 非定位元素的z-index
非定位元素没有z-index，但是如果将非定位元素设置为relative，则可以使用z-index了。
4. 总结
本文介绍了CSS中z-index的作用和层级关系，并给出了一些注意事项。正确地使用z-index可以对网页的展示效果产生积极的影响，而失误使用则可能产生难以解决的bug。