fixed元素遮挡内容的正确解法是用padding而非z-index或margin：顶部遮挡给body加padding-top，底部遮挡给主容器加padding-bottom，侧边遮挡用padding-right/left或width计算，absolute元素需父容器设position: relative。
fixed元素遮挡顶部内容：给body加padding-top就行
fixed定位的导航栏一加上，页面第一屏文字就消失了一半——这不是样式没生效，是浏览器根本没给它留空间。解决方式不是调z-index，而是让内容区“主动退让”。最稳的做法是给body加padding-top，值等于导航栏高度。
常见错误包括：html上设padding-top（会触发Safari回弹异常）、只用margin-top推第一个<h1></h1>（滚动时顶部仍露底）、在框架里把样式写进组件但被全局重置覆盖。
- 高度写死时直接用
padding-top: 60px，配合box-sizing: border-box避免撑大容器 - 响应式场景下（比如移动端导航栏缩到52px），用CSS变量+媒体查询：
:root { --nav-height: 60px; } @media (max-width: 768px) { :root { --nav-height: 52px; } }，再在body里写padding-top: var(--nav-height) - 别用
vh单位算高度——Safari地址栏收起/展开时视口高度会变，导致预留空间忽大忽小
fixed元素遮挡底部内容：padding-bottom比margin-bottom更可靠
底部固定导航栏盖住“联系我们”按钮或页脚链接？问题一样：脱离文档流后，内容往上挤。但这里不能只靠margin-bottom，它容易和外边距合并、影响scrollHeight计算，甚至让IntersectionObserver误判。
正确做法是给主体容器（比如<main></main>或包裹全部内容的#app）加padding-bottom，值严格等于底部栏高度。
- 优先作用于最外层内容容器，而非直接改
body，避免干扰第三方库或全局样式 - iOS安全区域要额外处理：用
padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)) - 如果底部栏高度由JS动态控制（比如键盘弹出时隐藏），必须同步更新CSS变量，否则padding留白会错位
侧边fixed元素遮挡内容：padding-right/ left + 容器宽度收缩
右侧悬浮按钮或左侧常驻菜单盖住文字？这时候遮挡发生在水平方向，不能只靠垂直方向留白。核心是让主内容区“向内缩”，给fixed元素腾出物理空间。
例如一个宽240px的右侧fixed侧边栏，主内容区必须主动让出这240px，否则文字会被裁切或交互失效。
- 给
body或主容器加padding-right: 240px，并确保box-sizing: border-box - 或者用
width: calc(100% - 240px)限制主内容宽度（注意：需父容器为position: relative或display: block） - 避免对
html或body设overflow-x: hidden来掩盖问题——这会让横向滚动失效，损害可访问性
absolute元素乱飘盖住内容：父容器必须有定位上下文
position: absolute的弹窗、提示框突然叠在标题上，不是top/left设错了，而是它找不到“锚点”。它会一直往上找最近的已定位祖先，找不到就钉在视口左上角，结果和fixed一样遮挡。
真正可控的方式，是让它的直接父容器成为锚点。
- 给父容器加
position: relative（最常用），哪怕它本身不需要偏移 - 父容器要有实际高度——如果里面只有
absolute子元素，父容器高度为0，子元素就会“掉”进兄弟元素里 - 多个
absolute子项并排时，别只靠left硬推，配合父容器width和overflow: hidden更稳
所有这些留白方案，本质都是让正常流内容“感知”到fixed/absolute元素的存在。真正容易被忽略的点是：响应式变化时，padding值必须同步更新；而一旦用了transform、opacity或filter，就可能意外创建新的堆叠上下文，让z-index失效——这时得回头检查定位链和上下文边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
