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

问题描述

在 CSS 中，z-index 属性有什么作用？如何使用它？

解答

z-index 属性控制元素的层叠顺序，即元素在层叠上下文中的位置。z-index 只能作用于定位元素（例如使用 position: relative; 或者 position: absolute;）。

z-index 的用法如下：

z-index: <integer>|auto|initial|inherit;

• <integer>：数字值表示层叠顺序，值越高则越靠上。
• auto：自动确定层叠顺序。
• initial：设置属性为默认值。
• inherit：继承父元素的属性值。

下面是一个例子：

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

.menu {
  position: absolute;
  z-index: 2;
}

在上面的例子中，.box 的 z-index 值为 1，而 .menu 的 z-index 值为 2。这意味着 .menu 会在 .box 之上进行渲染，因为它的 z-index 值更高。

需要注意的是，当两个元素层叠顺序相同的时候，先渲染的元素会在后渲染的元素之上。

以上是关于 z-index 属性的简单介绍。在实际开发中，我们需要根据情况合理设置 z-index 值，以确保网页元素在层叠上下文中的正确渲染位置。