语法如下:
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