HTML | DOM 样式 zIndex 属性

在 HTML 和 DOM 中，zIndex 属性用于设置元素的堆叠顺序，即哪个元素应该放在哪个元素的上面或下面。此属性仅适用于定位元素和浮动元素。

语法

<style>
    #example {
        position: absolute;
        z-index: 1;
    }
</style>

<div id="example">这是一个示例</div>

属性值

• 数字：指定元素应当放置的堆叠顺序。z-index 值越高的元素越在顶上。

• auto：浏览器会自动确定堆叠顺序。根据文档流中元素的位置和顺序，以及它们的 z-index 值来计算出元素的堆叠顺序。

注意事项

• z-index 只对带有定位的元素生效，即 position 属性不为 static 的元素。如果 position 属性设置为 static，则 z-index 无效。

• 堆叠顺序的值必须是整数。如果出现小数，则会被四舍五入为最接近的整数。

• 有些浏览器实现 z-index 的方式不一样，因此在使用 z-index 时需要格外小心，以避免产生布局问题。

浏览器支持情况

所有主流浏览器均支持 zIndex 属性。

总结

• zIndex 属性指定元素的堆叠顺序。

• 这个属性仅适用于定位元素和浮动元素。

• z-index 值越高的元素越在页面顶部。

• z-index 只对带有定位的元素生效，即 position 属性不为 static 的元素。

• 有些浏览器实现 z-index 的方式不一样，需要格外小心。