CSS 中 z-index 属性的作用

z-index 属性用于控制元素在堆叠上下文（stacking context）中的堆叠顺序。具有更高 z-index 值的元素会覆盖具有更低 z-index 值的元素。默认情况下，元素的堆叠顺序是根据其在 HTML 中的书写顺序决定的，但 z-index 可以改变这种顺序，使某些元素显示在其他元素的前面或后面。

使用场景

• 层叠顺序控制：在网页中，如果有多个重叠的元素，可以通过 z-index 来控制哪个元素显示在最上面。
• 弹出层与模态框：通常用较高的 z-index 值来确保弹出层或模态框显示在页面的其他内容之上。
• 复杂布局：在复杂的 UI 布局中，z-index 可以帮助开发者精确控制元素的显示顺序。

z-index 失效的情况

1. 没有建立堆叠上下文：
   • z-index 只在元素所属的堆叠上下文中起作用。如果元素没有建立自己的堆叠上下文（例如，没有设置 position 为 relative、absolute、fixed 或 sticky，或者没有某些 CSS 属性如 transform、opacity、filter 等），那么 z-index 可能不会按预期工作。
2. 父元素的堆叠上下文：
   • 如果一个元素的 z-index 设置得很高，但它的父元素在一个较低层级的堆叠上下文中，那么这个元素仍然可能被其他堆叠上下文中的元素覆盖。堆叠上下文是嵌套的，子元素的 z-index 是相对于其最近的堆叠上下文祖先元素而言的。
3. position 属性未设置：
   • 默认情况下，静态定位（position: static;）的元素不会创建新的堆叠上下文。因此，如果 z-index 用于静态定位的元素，它将不会生效。需要设置 position 为 relative、absolute、fixed 或 sticky 之一，才能使 z-index 生效。
4. Flexbox 和 Grid 布局中的子元素：
   • 在 Flexbox 和 Grid 布局中，子元素的 z-index 仍然受其父元素堆叠上下文的影响。如果父元素没有建立堆叠上下文，子元素的 z-index 可能不会按预期工作。

解决方案

• 确保建立堆叠上下文：通过设置 position 属性（如 relative、absolute 等）或其他相关属性（如 transform、opacity 等）来建立堆叠上下文。
• 理解堆叠上下文的嵌套：注意堆叠上下文的嵌套关系，确保 z-index 的设置是在正确的堆叠上下文中进行的。
• 检查父元素的样式：如果 z-index 似乎不起作用，检查父元素是否建立了堆叠上下文，以及它的 z-index 值是多少。

通过理解 z-index 的工作原理和堆叠上下文的概念，开发者可以更有效地控制网页中元素的堆叠顺序。