如何让内容元素显示在设置position:fixed属性的顶层div下方

position: fixed 会让元素脱离常规文档流，本身不占据页面排版空间，后续的普通流元素会自动向上偏移，最终显示在固定定位元素的下方，也就是你遇到的遮挡问题。

修复方案 #

方案1：顶部固定容器高度固定的场景 #

直接给页面全局或者第一个内容元素设置等于顶部容器高度的上内边距/上外边距即可，示例代码如下：

/* 假设你的顶部固定蓝色容器高度为120px，数值对应修改即可 */
body {
  padding-top: 120px;
  margin: 0;
}

方案2：顶部固定容器高度动态变化的场景 #

如果顶部容器高度会随内容、窗口尺寸或者动画效果变化，可以用JS动态计算高度后赋值：

// 页面加载、窗口尺寸变化时重新计算高度适配
window.addEventListener('load', updateContentOffset)
window.addEventListener('resize', updateContentOffset)

// 如果有动画效果，可以在动画触发的钩子中调用该函数同步适配
function updateContentOffset() {
  const topFixedElement = document.querySelector('替换为你的顶部固定容器选择器')
  const topHeight = topFixedElement.offsetHeight
  document.body.style.paddingTop = `${topHeight}px`
}

内容的提问来源于stack exchange，提问作者Mehdi Faraji