CSS Z-index

CSS Z-index属性是一个用于控制元素层叠级别的CSS属性。在布局中，不同的元素会出现层叠，如果没有指定z-index属性，则html元素默认的层叠级别为0，即排列顺序就是层叠顺序。

语法

z-index: auto|number|initial|inherit;

• auto：浏览器根据元素在HTML中的顺序自动分配层叠级别。
• number：设置元素的层叠级别。数值大的元素会覆盖数值小的元素。取值范围为任意整数。
• initial：使用属性的默认值。
• inherit：继承父元素的属性值。

层叠级别

z-index数值越高，元素在层叠中的优先级越高，即元素越在最上层。如果两个元素拥有相同的层叠级别，则根据DOM中元素的先后顺序，后出现的元素在最上层。

div {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    z-index: 1;
}

限制

z-index属性只能在定位元素中起效，即设置了position属性的元素才能使用z-index属性。同时，z-index属性只影响同级别的元素，不影响父元素、子元素以及其他兄弟元素。

.parent {
    position: relative;
    z-index: 1;
}

.child {
    position: absolute;
    z-index: 5;
}

在以上例子中，父元素的z-index为1，子元素的z-index为5。由于子元素的层叠级别只是相对于父元素而言的，子元素不会遮挡父元素。如果要覆盖其他元素，需要设置更高的层叠级别。

总结

z-index属性是CSS中用于控制元素层叠的属性，可以通过指定数值来控制层叠级别。该属性只在定位元素中起效，不影响父元素、子元素以及其他兄弟元素。