在哪些具体场景下，CSS 的 z-index 属性无法按预期产生层级控制效果？

回答思路

1. 【回答框架 1】z-index 并非所有元素都生效，它仅作用于定位元素（position 值非 static）以及 flex 或 grid 容器中的项目。对于静态定位的元素，z-index 会被忽略，元素层叠顺序遵循 DOM 顺序和层叠上下文规则。
2. 【回答框架 2】z-index 的数值会在层叠上下文内进行比较。如果两个元素处于不同的层叠上下文，它们的 z-index 值不能直接比较，而是各自所在上下文整体的层叠顺序决定。当父元素创建了层叠上下文（例如自身有 z-index 且定位，或 opacity 小于 1、transform 等属性），子元素的 z-index 将相对于该上下文内部生效，而不是全局。
3. 【回答框架 3】常见的失效场景包括：元素未设置 position 或 position 为 static；元素设置了 z-index 但父级元素未创建层叠上下文，同时兄弟元素通过其他属性（如 flex 项目顺序）影响层级；元素被 overflow 为 hidden 或 auto 的容器裁剪，导致视觉上被覆盖；元素内部由 transform、opacity 等属性创建了新的层叠上下文，使得子元素 z-index 无法与外部元素比较；在 iOS Safari 或旧版浏览器中，某些属性（如 -webkit-transform）也会导致 z-index 表现异常。
4. 【回答框架 4】解决时需要确保目标元素参与层叠上下文，可设置 position 为 relative 或 absolute，并避免在父级创建不必要的层叠上下文，或调整 DOM 顺序来符合预期层级。
5. 【关键点 1】z-index 只对定位元素或 Flex/Grid 项目生效，static 元素无法使用。
6. 【关键点 2】每个层叠上下文内部独立比较 z-index，不同上下文的 z-index 不能直接对比。
7. 【关键点 3】创建层叠上下文的常见属性包括 z-index+定位、opacity<1、transform、filter 等。
8. 【关键点 4】父级层叠上下文会限制子元素 z-index 的全局影响范围。
9. 【关键点 5】检查失效时需优先确认元素是否处于预期层叠上下文及是否有裁剪影响。
10. 【易错点 1】不要认为 z-index 值越大就一定覆盖所有元素，它只在同一层叠上下文中有效。
11. 【易错点 2】设置了 z-index 后元素仍无法覆盖，可能是父级元素创建了层叠上下文，而不是 z-index 本身失效。
12. 【易错点 3】默认创建层叠上下文的属性容易被忽略，例如 opacity 小于 1 或 transform 非 none。