z-index 属性是 CSS 中用于控制堆叠顺序的属性。它影响重叠元素的显示顺序,即哪个元素在上面,哪个在下面。

语法如下:
z-index: auto | <number> | inherit;

  •  auto:默认值,元素按照它们在文档流中出现的顺序进行堆叠。在多个元素重叠的情况下,后出现的元素在堆叠上方。

  •  <number>:一个整数值,决定元素的堆叠顺序。值越大,元素越靠近顶部。

  •  inherit:继承父元素的 z-index 值。


下面是一个简单的例子,演示了如何使用 z-index:
.lower {
  z-index: 1; /* 设置较小的 z-index 值 */
}

.upper {
  z-index: 2; /* 设置较大的 z-index 值 */
}

在这个例子中,.lower 类的元素具有较小的 z-index 值,而 .upper 类的元素具有较大的 z-index 值。当它们重叠时,.upper 元素将显示在 .lower 元素的上方。需要注意的是,z-index 只对定位元素(position: relative, position: absolute 或 position: fixed)有效。


转载请注明出处:http://www.zyzy.cn/article/detail/4276/CSS