网络技术问题 | CSS 测验 | 第 2 组 | 问题 6

问题描述

在CSS中，元素的z-index属性是什么作用？该属性如何使用？

回答

z-index属性是CSS中控制HTML元素层级的属性，通过设定不同元素的z-index值来实现根据设定的层级关系进行覆盖和叠加的效果。

当多个元素重叠在一起时，根据元素显示的先后顺序以及设置的z-index值来进行覆盖和叠加的显示效果。

在CSS中，z-index属性的值是一个整数，可以为正数、负数或0，但不能为小数，其默认值为auto，表示元素按照HTML文档编写顺序进行堆叠。

举个例子，如果你有两个div元素重叠在一起，如下所示：

<div class="box box1">这是div1</div>
<div class="box box2">这是div2</div>

你可以通过设置它们的z-index值来控制它们的显示先后顺序：

.box1 {
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 1;
}

在这个例子中，div1会覆盖在div2之上，因为它的z-index值比div2的值高。

总之，z-index属性是CSS中非常实用的一种层叠控制方法，可以让我们实现非常炫酷的效果。如果你想要了解更多关于这个属性的知识，请参考MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index.