滚动时Section内容与固定Header重叠问题求助

这是固定导航栏布局里非常常见的问题，根源在于**position: fixed**的元素会完全脱离正常文档流，不会在页面中占据任何空间——简单说就是页面的其他内容“看不到”这个导航栏，所以滚动时会直接跑到它下面去，导致重叠。

给你几个针对性的解决方案，按推荐程度排序：

方案1：给页面主体添加顶部内边距 #

这是最通用的方法，给body或者包裹所有区块的容器设置padding-top，值等于你的导航栏高度（比如导航栏高60px）：

body {
  padding-top: 60px; /* 数值和导航栏高度一致 */
}

这样所有页面内容都会从导航栏下方开始排列，不管滚动到哪个区块，都不会被导航栏挡住。

方案2：单独给重叠的区块设置顶部外边距 #

如果不想调整整个页面的布局，只针对.testimonial-one这个区块修复：

.testimonial-one {
  margin-top: 60px; /* 等于导航栏高度，可额外加5-10px增加间距 */
}

这个方法更精准，只会修改出问题的区块位置。

补充：确保导航栏层级在最上层 #

虽然固定定位元素默认层级较高，但如果页面里有其他带position: relative/absolute/fixed的元素，可能会盖住导航栏，建议给导航栏加个足够高的z-index：

nav {
  z-index: 999; /* 数值只要比其他定位元素高就行 */
}

为什么你之前的尝试没效果？ #

• 设置.items为display: block只是改变元素的显示模式，完全没触及“固定元素脱离文档流”这个核心问题，所以没用；
• 给元素加position: absolute会让它也脱离文档流，还会破坏原本的布局结构，自然会引发新的问题，这不是正确的解决思路。

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