z-index 属性在什么情况下会失效？

1. 元素没有定位属性

z-index 属性只对设置了定位属性的元素有效，这些定位属性包括：

• position: relative;
• position: absolute;
• position: fixed;
• position: sticky;

如果元素没有设置 position 属性，或者 position 的值是 static（这是默认值），z-index 是没有效果的。即使设置了 z-index，元素的层级仍然按照文档流中的顺序来决定。

示例：

<div style="z-index: 100;">This div has no positioning, so z-index won't work.</div>

2. z-index 失效的层叠上下文（Stacking Context）

每一个层叠上下文都是一个独立的层叠体系，它们之间的元素无法影响其他层叠上下文中的元素。常见的创建新的层叠上下文的情况包括：

• 元素的 position 属性为 relative、absolute、fixed 或 sticky，并且 z-index 的值不是 auto。
• 元素的 opacity 属性值小于 1。
• 元素的 transform、filter、perspective、clip-path 等属性值不为 none。
• will-change 属性指定了这些会影响层叠上下文的属性。

当两个元素不在同一个层叠上下文中时，它们的 z-index 值无法相互比较。

示例：

<div style="position: relative; z-index: 2;">
  <div style="position: absolute; z-index: 1;">Child with lower z-index</div>
</div>
<div style="position: relative; z-index: 1;">
  <div style="position: absolute; z-index: 3;">Another stacking context</div>
</div>

在上面的示例中，最外层的两个 div 创建了不同的层叠上下文，因此它们的子元素的 z-index 值不会互相影响。

3. 父子元素的 z-index

在同一个层叠上下文中，子元素的 z-index 值仅相对于父元素的兄弟元素来决定。换句话说，一个元素的 z-index 无法影响到它的父元素，父元素的层叠顺序总是优先于其子元素。

示例：

<div style="position: relative; z-index: 1;">
  <div style="position: absolute; z-index: 10;">Child</div>
</div>
<div style="position: relative; z-index: 5;">Sibling</div>

在上述示例中，即使子元素 Child 的 z-index 比 Sibling 高，但由于 Child 是在父元素中，整个父元素（包括子元素）仍然会在 Sibling 元素后面。

4. 层叠顺序的其他因素

除了 z-index 之外，层叠顺序还受到其他因素的影响，如背景和边框、浮动、块级元素、内联元素等。它们在没有 z-index 定义的情况下，按照浏览器的默认层叠顺序进行渲染。

总结：

理解 z-index 的工作机制需要了解层叠上下文、层叠顺序，以及 CSS 中的定位属性。只有在正确设置了定位属性且理解层叠上下文的情况下，才能正确地使用 z-index 控制元素的堆叠顺序。