fixed元素遮挡内容的根本原因是脱离文档流，后续内容从视口顶部渲染；最稳妥解法是给body设padding-top（值等于导航栏实际高度），而非调z-index或用margin-top。
fixed元素遮挡内容：别调z-index，先给body加padding-top
fixed元素盖住下面的文字、图片或按钮，根本不是z-index太小，而是它彻底脱离文档流，后续内容从视口顶部开始渲染——相当于“看不见”这个导航栏的存在。最稳妥的解法是让
主动腾出空间。常见错误是给.content加margin-top，但若页面结构嵌套深、有多个wrapper，容易漏掉或重复计算；直接作用于
更可靠：-
body设padding-top，值等于fixed导航栏的实际高度（含padding、line-height、边框等） - 避免用
margin-top——某些浏览器会触发滚动条偏移或布局抖动 - 高度不固定时（如移动端折叠菜单），改用CSS变量+JS动态更新
--navbar-height，再在body中引用
absolute元素逃逸父容器：检查父级是否设置了position: relative
一个position: absolute的按钮总跑出卡片外、压在隔壁模块上，大概率是它的父容器没建立定位上下文。absolute不是“绝对”，而是“相对于最近的已定位祖先”——如果父容器position: static（默认值），它就往上一直找，最后落到视口上。
实操要点：
- 目标元素的**直接父容器**必须显式设置
position: relative（或其他非static值） - 不要只靠
top: 20px把元素“推”进可视区，同时确认父容器本身有高度（比如min-height或内容撑开） - 多个absolute子元素并排时，仅靠
left易重叠，建议配合父容器width和overflow: hidden做边界控制
z-index失效：先看有没有意外创建堆叠上下文
两个都设了z-index的弹窗，一个能盖住另一个，另一个却总被压着——大概率是其中一个父容器悄悄触发了新堆叠上下文，把子元素的z-index锁死在内部了。
哪些属性会“偷偷”创建堆叠上下文？
-
opacity小于1（哪怕opacity: 0.99） -
transform（包括translateZ(0)）、filter、perspective -
isolation: isolate或will-change
排查方法：在开发者工具里选中遮挡方，看Computed面板是否出现“Stacking Context”提示；临时删掉可疑父级样式，确认是否恢复。
table里下拉菜单被遮：z-index对tr/td无效，得包一层容器
点击表格行里的“操作”按钮，下拉菜单一出来就被隔壁<tr>盖住，调<code>z-index: 9999也没用——因为<table>、<code><tr>、<code><td>默认<code>position: static，z-index根本不生效。
正确做法：
- 把菜单包进一个
<div class="dropdown-menu">，并设<code>position: absolute+z-index <td>必须设<code>position: relative，否则absolute菜单找不到参考点- 确保
<td>没配<code>overflow: hidden或transform，否则菜单会被裁切或困在局部堆叠上下文里真正麻烦的从来不是写几行CSS，而是定位和层叠规则在不同场景下的隐式交互——一个
opacity: 0.99或一个没写的position: relative，就能让整个布局逻辑拐个弯。
