层级混乱的本质是定位逻辑与布局职责未分离，应明确容器分工：定位用position，排列用flex/grid；按功能而非视觉分层，合理创建层叠上下文；用嵌套容器隔离职责，严格控制absolute/fixed使用范围。
层级混乱的本质，不是元素太多，而是定位逻辑和布局职责没分清。解决的关键是把“谁负责位置”和“谁负责排列”拆开管。
明确容器与子项的分工
一个盒子该用 position 还是 display: flex/grid，取决于它在整套结构里扮演什么角色：
- 如果它的作用是“锚定某块内容到页面固定位置（比如悬浮按钮、吸顶导航）”，那就用 position: fixed/absolute，且父容器最好设 position: relative 作为定位上下文
- 如果它的作用是“组织内部多个子元素的顺序、对齐、间距”，那就交给 flex 或 grid，别混用 float 或 position 去调子项位置
- 避免同一级容器既设 display: flex 又给子项加 position: absolute——这会让子项脱离文档流，破坏 flex 的布局计算
按功能划分层级，不按视觉堆叠顺序
Z-index 不是“越写越大就越靠前”，而是依赖层叠上下文。常见误区是所有带遮罩、弹窗、下拉菜单的元素都拼命调高 z-index。
- 先划定几个稳定的层叠上下文：比如 body 下建 .layout-header（z: 100）、.layout-main（z: 1）、.layout-overlay（z: 999）
- 每个上下文内部再用 z-index 控制局部顺序，例如下拉菜单在 .layout-main 内部 z: 10，就足够盖过同区域的按钮（z: 1）
- 只要父容器没创建新层叠上下文（如没设 position + z-index / opacity / transform 等），子元素的 z-index 就直接跟 body 比较
用嵌套容器隔离不同布局逻辑
不要指望一个 div 同时搞定定位、响应式、滚动和动画。把职责拆到多层容器中：
- 外层容器：负责定位（position: relative / fixed）和层叠上下文（z-index）
- 中层容器：负责整体布局方式（display: flex / grid）和响应式断点
- 内层容器或元素：只处理自身样式、动效、交互状态，不参与位置计算
例如一个带关闭按钮的弹窗：
<div class="modal-wrapper" style="position: fixed; z-index: 1000;">
<div class="modal-layout" style="display: flex; justify-content: center; align-items: center;">
<div class="modal-content">…</div>
</div>
</div>
检查并收敛定位方式的使用范围
绝对定位（absolute）和固定定位（fixed）应是“例外”，不是默认。每加一处，问自己：
- 这个元素是否必须脱离文档流？有没有更语义化的方式（比如用 margin-auto / flex-center / inset）？
- 它的父容器是否设置了 position: relative？没有的话，它会往上一直找，直到 body，容易意外错位
- 同一组相关元素（如下拉菜单+触发按钮）是否共用同一个定位上下文？避免各自找父级导致错位
