z-index 默认值：你所不知道的层叠上下文

在网页设计中，z-index 是一个非常重要的CSS属性，它决定了元素在Z轴上的堆叠顺序。今天我们来深入探讨一下 z-index 的默认值及其相关应用。

z-index 的默认值

z-index 的默认值是 auto。当一个元素的 z-index 设为 auto 时，它的堆叠顺序将由其在文档流中的位置决定。具体来说：

块级元素：按照它们在HTML中的顺序堆叠，后面的元素会覆盖前面的元素。
定位元素（如 position: relative; 或 position: absolute;）：如果没有明确设置 z-index，它们会按照文档流的顺序堆叠。

层叠上下文

理解 z-index 还需要了解 层叠上下文（Stacking Context）。层叠上下文是一个三维的概念，包含了页面上的所有元素。每个层叠上下文独立于它的兄弟元素处理，形成一个堆叠的层级结构。以下是创建层叠上下文的一些常见方式：

根元素（<html>）
position 值为 relative、absolute 或 fixed 且 z-index 值不为 auto 的元素
opacity 小于 1 的元素
transform 值不为 none 的元素
mix-blend-mode 值不为 normal 的元素
filter 值不为 none 的元素
perspective 值不为 none 的元素
isolation 值为 isolate 的元素

应用场景

弹出层和模态框：在设计弹出层或模态框时，通常需要它们覆盖页面上的其他内容。这时，设置一个较高的 z-index 值可以确保弹出层在最前面。
```
.modal {
    position: fixed;
    z-index: 1000;
}
```
导航菜单：当导航菜单需要在页面滚动时保持在顶部，可以使用 z-index 确保菜单不会被其他内容覆盖。
```
.navbar {
    position: fixed;
    top: 0;
    z-index: 999;
}
```
下拉菜单：下拉菜单需要在点击时显示在其他内容之上，z-index 可以帮助实现这一点。
```
.dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
}
```
广告和浮动元素：有时需要让广告或浮动元素始终在页面最前面，以确保用户能看到它们。
```
.ad {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
}
```

注意事项

z-index 只有在定位元素（如 position: relative; 或 position: absolute;）上才有效。
z-index 的值可以是负数，但负值的元素会位于层叠上下文的底部。
在同一个层叠上下文中，z-index 值越大，元素越靠前；但在不同的层叠上下文中，z-index 值的比较是无效的。

总结

z-index 的默认值 auto 虽然简单，但其背后的层叠上下文机制却非常复杂。通过合理使用 z-index，我们可以精确控制网页元素的显示顺序，实现各种复杂的布局效果。无论是弹出层、导航菜单还是广告展示，z-index 都是前端开发者不可或缺的工具。希望通过本文的介绍，大家能对 z-index 有一个更深入的理解，并在实际项目中灵活运用。