在网页设计中，position: fixed 是一个挺常用的定位方式。比如把网站头部导航固定在顶部，用户滚动页面时导航始终可见，体验会好很多。
但问题也随之而来：给头部设置了 position: fixed 后，下方的 div 元素会被覆盖，内容显示不全，极大影响用户体验。
咋办？下面无锡网站建设-马氪软件就来分享几种常见解决方法。
一、为什么会被覆盖？
position: fixed 会让元素脱离正常的文档流，不再占据原来的空间。后面的元素会“以为”它不存在，于是自动上移，结果就被固定元素盖住了。理解这一点，解决方法就清楚了：要么把下方内容往下推，要么在固定元素后面补一个占位空间。
二、方法一：给下方元素设置 margin-top
这是最简单、最常用的方式。
#header { position: fixed; background-color: #fff; width: 100%; top: 0; left: 0; height: 120px; z-index: 999;}.topsbv-y { margin-top: 120px; /* 值等于固定元素的高度 */}给紧跟在固定元素后面的内容加上 margin-top，值等于固定元素的高度，内容就不会被盖住了。
优点： 代码简单，容易理解。
缺点： 固定元素高度变化时，需要同步修改 margin-top。
三、方法二：添加占位元素
在固定元素和下方内容之间，插入一个空 div，专门用来占位。
<header id="header">...</header><div class="placeholder"></div><main class="content">...</main>#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120px;
background-color: #fff;
z-index: 999;
}
.placeholder {
height: 120px; /* 与固定元素高度一致 */
}这样下方内容会从占位元素之后开始，不会被覆盖。
优点： 不影响下方元素自身的样式，结构更清晰。
缺点： 多了一个空标签，稍微不够优雅。
四、方法三：给 body 或容器设置 padding-top
如果固定元素是全局头部，可以直接给 body 或最外层容器加 padding-top。
body { padding-top: 120px; /* 固定头部的高度 */}#header { position: fixed; top: 0; left: 0; width: 100%; height: 120px; background-color: #fff; z-index: 999;}优点： 一次性解决，所有内容自动下移。
缺点： 如果页面中有其他全宽背景元素，可能会受到一点影响，需要微调。
五、方法四：固定高度动态变化的处理
如果固定元素的高度不是固定的（比如导航内容多少会变），可以用 CSS 变量或 JavaScript 动态设置。
CSS 变量方式：
:root { --header-height: 120px;}#header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: #fff; z-index: 999;}.content { margin-top: var(--header-height);}JavaScript 动态获取高度：
const header = document.querySelector('#header');const content = document.querySelector('.content');content.style.marginTop = header.offsetHeight + 'px';这样即使头部高度变化，下方内容也能自动适应。
六、注意事项
- 一定要设置
top: 0; left: 0;
否则可能引起margin-top失效或定位偏移。 - 记得设置
z-index
固定元素要盖在内容上方，z-index需要足够大。 - 移动端要测试
手机端头部高度可能不同，margin-top或padding-top要响应式调整。 - 不要用
margin-top给固定元素自身
固定元素已经脱离文档流，给它加margin-top不会推开下方内容，反而可能让它自己偏移。
七、总结
让 position: fixed 元素不覆盖下方内容，核心思路就是补回它脱离文档流后失去的空间。
- 简单场景：给下方元素加
margin-top； - 结构清晰：加占位
div； - 全局处理：给
body加padding-top； - 高度动态：用 CSS 变量或 JS 动态计算。
好了，以上就是无锡马氪软件对于“使设置了 position: fixed 的元素不覆盖下方元素的方法”这个问题的解释，希望方法能够对大家有所帮助。如果您在网站建设中遇到类似问题，欢迎交流。
