正确设置position和理解层叠上下文是解决元素遮挡的关键，z-index仅在同层级上下文中生效，需避免跨上下文误用。
当多个元素在页面中发生重叠时，控制哪个元素显示在上方、哪个在下方，关键在于理解CSS的层叠上下文（stacking context）和z-index属性的使用规则。单纯设置position和z-index并不总能解决问题，尤其在复杂布局中容易出现遮挡失控的情况。
定位与层叠基础：position的作用
只有设置了position为relative、absolute、fixed或sticky的元素，才能通过z-index控制层叠顺序。静态定位（static）元素即使设置了z-index也不会生效。
常见错误是给一个默认position: static的元素设置z-index，结果发现无法改变遮盖关系。解决方法是先赋予合适的定位方式：
- relative：相对自身原位置偏移，不影响文档流
- absolute：脱离文档流，相对于最近的已定位祖先元素定位
- fixed：相对于视口固定定位
- sticky：滚动到特定位置后变为固定定位
z-index不是万能钥匙：层叠上下文的影响
z-index只在同一个层叠上下文中起作用。如果两个元素属于不同的层叠上下文，即使一个元素的z-index值很大，也可能被另一个层叠上下文整体“压住”。
层叠上下文由以下情况创建：
- 根元素（html）自动形成根层叠上下文
- 设置了z-index且position不为static的元素（同时形成新的层叠上下文）
- 设置了opacity小于1的元素
- 设置了transform、filter、will-change等属性的元素
- flex或grid容器中的子元素在某些情况下也会触发
这意味着，父级元素的层叠顺序决定了其所有子元素的整体显示层级，子元素无法通过高z-index“突破”父级的层叠限制。
解决遮挡问题的实际策略
遇到元素被意外遮挡时，不要盲目调大z-index。应从结构层面分析层叠关系：
- 检查涉及元素的position是否正确设置
- 确认z-index是否在同层级比较，避免跨层叠上下文对比
- 尽量减少不必要的层叠上下文创建，例如避免在非必要时使用transform或opacity
- 对于模态框、下拉菜单等需要置顶的组件，可将其移至body下作为独立层级，避免受父级限制
- 使用开发者工具查看元素的层叠层级，Chrome的Layers面板有助于分析层叠上下文结构
基本上就这些。掌握position和z-index的配合使用，理解层叠上下文的生成机制，才能从根本上解决元素重叠遮挡问题。不复杂但容易忽略的是：DOM结构层级和CSS渲染层叠之间的相互影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
