页面元素重叠主因是position与z-index未形成有效层叠上下文；z-index仅对定位元素生效，且只在同层叠上下文中起作用，父元素设z-index会创建新上下文隔离子元素。
页面元素重叠，多数是因为 position 和 z-index 配合不当导致的。关键不是“有没有设”，而是“有没有形成有效的层叠上下文”。
确认元素是否真的参与层叠上下文
z-index 只对 定位元素（即 position 值为 relative、absolute、fixed 或 sticky）生效。如果某个元素是 static（默认值），即使写了 z-index 也完全无效。
- 检查 CSS 中是否漏写了 position 属性
- 避免在父容器上盲目加 position: relative 而不理解其影响
- 注意：flex 或 grid 容器中的子项即使设置了 position，也可能因层叠上下文被截断
理清 z-index 的作用范围
z-index 不是全局排序，它只在同一个层叠上下文内有效。父元素设置了 z-index（且自身是定位元素），就会创建新的层叠上下文，子元素的 z-index 只相对于这个父容器起作用。
- 例如：header 的 z-index 是 10，但内部按钮设了 z-index: 999，也不会盖过 body 里 z-index: 20 的弹窗——因为弹窗和 header 处于同一级上下文，而按钮被 header 的层叠上下文“框住”了
- 调试时可临时给疑似“卡住”的父容器加 outline 或 background，看清层级包裹关系
常见误操作与快速排查法
不用一行行翻代码，先聚焦三处：
立即学习“前端免费学习笔记（深入）”；
- 重叠区域的两个元素，各自是否有 position？值是什么？
- 它们最近的共同定位祖先是谁？那个祖先有没有设 z-index？是否无意中创建了隔离的层叠上下文？
- 浏览器开发者工具中，选中元素 → 查看 Computed → 拉到最底下看 “Stacking context” 是否显示 “Yes”
简单可靠的修复思路
优先用最小改动解决问题：
- 确保要置顶的元素有 position + z-index（如 position: relative; z-index: 100）
- 如果它被某个父容器“压住”，尝试给该父容器提升 z-index，而不是一味调高子元素
- 实在混乱时，可临时移除部分元素的 position 或 z-index，逐个恢复，观察变化节点
不复杂但容易忽略。重点不在数值多大，而在上下文是否连通。
