fixed定位导航栏遮挡下方flex布局section区块问题咨询

position: fixed定位的元素会完全脱离正常文档流，不再占据页面中的布局位置。你的导航栏header设置了固定定位贴在页面顶部，后续的section区块会默认从页面视口最顶端开始排布，自然会被高度51px的导航栏遮挡顶部区域。
你之前尝试给section加position: fixed; top: 50px的方案是错误的：这会让section也脱离文档流固定在视口上，页面滚动时该区块不会随内容正常移动，会引发更多布局错乱。

不需要给section设置固定定位，只需要给正常流中的内容预留出导航栏的高度空间即可，任选一种方案就行：

• 方案1：给body设置顶部内边距，全局预留导航栏空间，后续新增的页面内容都不会被导航遮挡

body {
  /* 保留你原有的body样式，新增下面这行 */
  padding-top: 51px; /* 值和header的高度保持一致 */
}

• 方案2：直接给第一个内容区块.world-news加顶部外边距

.world-news {
  /* 保留你原有的.world-news样式，新增下面这行 */
  margin-top: 51px;
}

顺手修复两个不规范的写法避免后续出问题：

• h1的样式font-size: 13缺少单位，浏览器无法解析，修改为font-size: 13px
• 当前header设置了justify-content: flex-end会把logo、导航、头像全部挤到右侧，如果要实现logo居左、导航和头像居右的常规导航布局，给logo元素加margin-right: auto即可自动撑满左侧剩余空间。

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