答案：控制页面元素重叠的关键在于理解z-index与层叠上下文的关系。z-index仅在定位元素上生效，且受父级层叠上下文限制，子元素无法超出其层级范围；opacity、transform、filter等属性会创建新层叠上下文，导致“z-index失效”错觉；解决方法包括减少不必要的层叠上下文、将浮层置于外层DOM、预留高z-index值，并利用开发者工具调试层级结构。
当多个定位元素在页面中发生重叠时，控制谁在上、谁在下，关键在于理解 z-index 和 层叠上下文（stacking context） 的工作机制。很多人以为只要设置 z-index 就能改变层级，但实际效果常常不如预期，原因就是忽略了层叠上下文的影响。
z-index 并非万能，它依赖于层叠上下文
z-index 只对定位元素（即 position 不是 static 的元素）生效。设置 z-index 后，元素会在当前层叠上下文中确定自己的堆叠顺序。但问题在于：每个层叠上下文都有独立的“层级空间”，子元素的 z-index 再大，也无法突破父级层叠上下文的层级限制。
比如：一个 z-index: 9999 的元素如果在一个 z-index: 1 的层叠上下文中，它仍然会显示在 z-index: 2 但处于更高层叠上下文的元素之下。
哪些操作会创建新的层叠上下文？
以下情况会触发浏览器创建一个新的层叠上下文：
立即学习“前端免费学习笔记（深入）”；
- 根元素（html）自动创建根层叠上下文
- 设置了 position 且 z-index 不为 auto 的元素
- 设置了 opacity 小于 1 的元素
- 使用了 transform、filter、perspective 等 CSS 属性的元素
- will-change 指定了影响层叠的属性
- 使用 isolation: isolate 或 mix-blend-mode 非 normal 的元素
这些看似与层级无关的属性，实际上悄悄改变了渲染层级结构，容易造成“z-index 失效”的错觉。
如何避免和解决重叠层级问题？
要有效控制元素堆叠顺序，必须从整体结构出发：
- 尽量减少不必要的层叠上下文创建，尤其是对容器滥用 opacity 或 transform
- 确保需要置顶的元素（如弹窗、提示框）位于最外层 DOM 结构中，或脱离复杂嵌套
- 使用较高的 z-index 值（如 1000 以上）为全局浮层预留空间，避免频繁冲突
- 调试时使用浏览器开发者工具的“3D 视图”或层级检查功能，查看真实的堆叠结构
基本上就这些。理解 z-index 不是孤立工作的，而是运行在层叠上下文的“舞台”之上，才能真正掌控页面元素的前后关系。不复杂但容易忽略。
