使用 margin/padding、占位元素、calc() 计算或 z-index 控制可解决 fixed 定位遮挡内容问题，关键是为固定元素预留空间。
当使用
position: fixed
定位元素（如导航栏、侧边栏）时，它会脱离文档流并固定在视窗某个位置，容易遮挡页面其他内容。这个问题常见于顶部固定导航遮住正文开头部分。以下是几种实用的解决方法。
1. 给内容区域添加 margin 或 padding
最简单的方式是为被遮挡的内容区域（如主内容容器或 body）增加上方外边距或内边距，留出足够空间避开 fixed 元素。
例如：
假设你的固定导航高度为 60px：
或者直接给 body 添加 padding：
立即学习
“
前端免费学习笔记（深入）
”；
2. 使用占位元素（spacer element）
在 fixed 元素对应的位置添加一个等高、不可见的占位块，占据原本的空间，防止内容上移被遮挡。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
示例：
3. 利用 CSS calc() 动态计算可用空间
在某些布局中，可以结合 calc() 让内容区域自动适应 fixed 元素占用的空间。
比如设置内容高度时排除导航高度：
这样内容区域不会超出视口，同时避免被遮挡。
4. 确保 z-index 层级合理
虽然 fixed 元素默认层级较高，但有时需要明确设置
z-index
避免与其他元素冲突。确保 fixed 元素在视觉上前置，而内容不被错误地显示在上面。
基本上就这些常用方法。选择哪种取决于你的布局结构和设计需求。关键是让内容“知道”有 fixed 元素存在，并为其留出空间。
.main-content {
margin-top: 60px;
}
body {
padding-top: 60px;
}
导航栏
页面内容
.header-spacer {
height: 60px; /* 与 fixed 元素同高 */
margin: 0;
padding: 0;
border: none;
}
.content {
height: calc(100vh - 60px);
overflow-y: auto;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 1000; /* 确保在其他内容之上 */
}