fixed元素盖住下方内容是因为脱离文档流，浏览器不为其预留空间；解决方法是给body或主容器加padding-top主动避让，而非调z-index，高度不固定时需js动态更新或改用sticky。
fixed元素盖住下面内容？给body加padding-top
fixed元素脱离文档流，浏览器根本不会为它留空，后续内容直接从视口顶部开始渲染，不是z-index问题，是布局逻辑本身导致的。最稳妥的做法是让正常流内容主动避让。
- 给
body或主容器加padding-top（值等于fixed元素高度），兼容性好、无副作用 - 高度不固定时，用JS监听并动态更新
padding-top，比margin-top更安全（后者可能触发滚动条偏移） - 能用
position: sticky替代就别硬上fixed，它天然受父容器约束，不逃逸
absolute元素跑出父容器？父级必须设relative
absolute元素会向上找最近的“已定位祖先”，找不到就相对于视口定位——这正是它乱飘、盖住其他组件的根源。关键不是调z-index，而是锚定参照系。
- 确保
absolute子元素的**直接父容器**有position: relative - 父容器本身要撑开高度（比如有内容或显式
min-height），否则top: 0可能叠在兄弟元素上 - 别只靠
left偏移来“推”位置，配合width和overflow: hidden更可控
relative元素视觉偏移却遮挡别人？它仍占原空间
position: relative只是让元素“看起来”移动了，但它在文档流里还占着原来的位置，偏移后容易压到邻近元素。这不是bug，是设计如此。
- 如果偏移后遮挡明显，优先考虑改用
transform: translate()——同样不脱离文档流，但更高效且不影响布局计算 - 给相邻元素加
margin预留视觉空间，比硬调z-index更可靠 - 频繁出现遮挡，说明relative不适合当前场景，该换
absolute（配好父级relative）或回归static+外边距方案
z-index设了却没用？先查层叠上下文是否被截断
z-index不是全局排序，它只在同一个层叠上下文中生效。父级一个opacity: 0.99或transform: scale(1)就可能把子元素关进独立小圈子，再大的z-index也比不过隔壁上下文里的z-index: 1。
- 用Chrome开发者工具右键元素 → “Show layers”，看是否被标为stacking context
- 临时删掉可疑父级的
opacity、transform、filter，观察覆盖是否恢复 - 不要给浮动元素自己加z-index（无效），要调就调它的父容器，并确保父容器有
position: relative和显式z-index
真正难的不是写对某一行CSS，而是判断当前遮挡到底是脱离文档流、参照系丢失，还是层叠上下文被意外切断——这三个原因对应三种完全不同的修复路径，混用只会让问题更隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
