z-index失效因元素未定位或处于不同层叠上下文；绝对定位参照最近已定位祖先，非父元素；flex/grid中order等属性会改变视觉顺序但不影响DOM结构。
元素在页面上叠错位置，z-index 不生效怎么办
z-index 只对「定位元素」（position 值为 relative、absolute、fixed 或 sticky）起作用。如果两个元素都设了 z-index 却没按预期叠放，大概率是它们属于不同的层叠上下文（stacking context），彼此隔离。
- 用浏览器开发者工具检查每个元素的
position和z-index是否实际生效（灰色值表示被忽略） - 查看父级是否意外创建了新层叠上下文——常见触发条件包括：
opacity 、<code>transform非none、filter、will-change、isolation: isolate - 层级关系优先于
z-index数值：一个z-index: 999的子元素，仍会被其父级（z-index: 1）所在层叠上下文整体压在另一个z-index: 2的兄弟容器下面
绝对定位元素跑出可视区或位置偏移异常
绝对定位（position: absolute）的参照物是「最近的已定位祖先元素」，不是父元素本身。若祖先都没设 position，它就相对于初始包含块（通常是视口）定位，极易“飞走”。
- 逐级向上检查祖先节点是否设置了
position: relative（最常用兜底方案）或其他定位值 - 注意
top/left等偏移量是相对于定位容器的 padding box，不是 border box；若祖先有border，视觉上可能产生错觉 - 避免在 flex 或 grid 容器内部混用
absolute定位——布局模型冲突会导致尺寸计算异常，比如width: 100%在绝对定位下不继承父 flex item 的宽度
flex / grid 布局中子元素顺序和 DOM 顺序不一致
Flex 和 Grid 支持通过 order、grid-row 等属性改变视觉顺序，但 DOM 结构不变。这会导致可访问性（屏幕阅读器）、键盘导航、SEO 行为与视觉不符，调试时容易误判为“顺序混乱”。
- 在开发者工具中切换「Accessibility」面板，查看实际读取顺序是否与 DOM 一致
- 检查是否误用了
flex-direction: row-reverse或grid-auto-flow: dense，它们会隐式重排元素 - 用
getComputedStyle(element).order查看运行时order值，确认是否被 CSS 规则覆盖（注意：该值不反映最终视觉位置，只反映 flex 排序权重）
用 Chrome DevTools 快速定位定位失效根源
浏览器的渲染层可视化功能比手动猜更快定位问题。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → 「Rendering」标签 → 勾选
Paint flashing和Layer borders：闪烁区域说明重绘频繁，彩色边框显示哪些元素被提升为独立图层（即创建了层叠上下文） - 右键元素 → «Break on» → «Attribute modification»：监听
style属性变化，快速捕捉 JS 动态改定位相关样式的行为 - 在「Elements」面板中，悬停在元素上时，右侧 «Styles» 面板顶部会显示该元素的「Computed» position 类型和层叠上下文路径（如
Stacking Context: <div>） <p>定位类问题真正难的不是写法，而是理解浏览器如何把 CSS 规则翻译成渲染树中的几何关系和绘制顺序。DOM 结构、定位上下文边界、层叠上下文嵌套——这三层一旦错一层，表现就不可控。调试时别只盯着目标元素，它的父、祖父、甚至更上层的样式都可能是罪魁祸首。</p> </div>
