fixed定位元素盖住内容是因为脱离文档流，后续内容从视口顶部开始布局；解决方法是给body或容器加padding-top主动避让，而非盲目调z-index。
fixed定位元素为什么总盖住下面的内容
因为 position: fixed 会让元素脱离文档流，浏览器渲染时完全不给它预留空间，后续内容直接从顶部（或视口左上角）开始布局，自然就“钻到”fixed元素底下去了。这不是z-index的问题，是布局逻辑本身导致的。
常见场景：固定顶部导航栏、右下角悬浮按钮、侧边工具栏。解决核心不是拼命调 z-index，而是让正常流内容「主动绕开」fixed区域。
- 给
或主容器加padding-top（对应fixed顶部高度），是最直接且兼容性最好的方式 - 如果fixed元素高度不固定（比如响应式导航栏随屏幕缩放变高），用
margin-top不可靠，应改用padding-top配合 JS 动态更新，或改用position: sticky替代 - 避免对
直接设margin——某些浏览器会触发滚动条偏移或布局抖动
absolute定位遮挡怎么办：父容器必须有定位上下文
position: absolute 的元素会相对于最近的「已定位祖先元素」（即 position 值为 relative、absolute、fixed 或 sticky）进行偏移。如果没找到，就回退到初始包含块（通常是视口），结果和 fixed 类似，容易盖住其他内容。
实操关键点：
- 确保目标元素的**直接父容器**设置了
position: relative（最常用），这样absolute子元素才真正“钉”在父容器内部，不会逃逸 - 不要只靠
top/left把元素“推”进可视区，而忽略父容器是否撑开——如果父容器高度为0，absolute子元素即使设了top: 20px，也可能叠在兄弟元素上面 - 当需要多个absolute元素并排又不重叠时，别只依赖
left偏移，配合父容器的width和overflow: hidden更可控
z-index不起作用？先检查定位上下文和堆叠上下文
z-index 只对定位元素（position 不为 static）生效，但它不是全局排序，而是在「堆叠上下文」内起作用。一个常见错误是：给两个同级div都设了 z-index，但其中一个父容器触发了新的堆叠上下文（如设置了 opacity: 0.99、transform: translateZ(0)、filter: blur(1px)），导致它的子元素z-index被限制在该上下文内，无法和外部元素比高低。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
排查步骤：
- 用浏览器开发者工具检查遮挡元素及其父级，看是否有意外的
transform、opacity、filter或will-change - 如果必须用这些属性，就在同一堆叠上下文内统一管理
z-index，而不是跨上下文对比 - 避免滥用
z-index: 9999——数值本身无意义，关键是层级关系；优先用小整数（如1、2、10）建立清晰的层结构
用margin模拟定位效果反而更安全？
当需求只是「把某块内容往右/下挪一点，且不希望影响布局流」时，与其上 position: relative + top/left，不如直接用 margin。因为 margin 不脱离文档流，后续元素会自动避开它腾出的空间，天然防遮挡。
适用边界很明确：
- 仅用于微调位置（比如图标和文字不对齐，加
margin-top: -2px） - 不适用于需要精确像素对齐、响应式偏移或动画的场景——
margin动画性能差，且无法实现“相对于视口定位” - 注意
margin-collapse：相邻块级元素的垂直margin会合并，此时用padding或border隔开更稳妥
真正难处理的不是“怎么定位”，而是定位后如何让整个布局系统依然可预测。外边距和定位不是二选一，而是要清楚各自生效的边界——margin 管流内占位，position 管脱离后的坐标系，混用时尤其要盯紧堆叠上下文的生成时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
