如何解决div.content与固定定位header重叠问题？

这是固定定位元素的常见坑点——当你给元素设置position: fixed时，它会脱离正常的文档流，页面其他内容会完全忽略它的存在，自然就会跑到它下方重叠起来。改display属性根本解决不了这个核心问题，咱们直接来修复：

第一步：梳理头部的定位逻辑 #

你现在同时给外层的.myHeader和内部的ul都加了position: fixed，这完全是多余的，反而会让头部的高度计算混乱。咱们只需要保留.myHeader的固定定位，内部的h1和ul用正常流布局就好：

.myHeader{
  display: block;
  position: fixed;
  height: auto;
  width: 100%;
  z-index: 100;
  background-color: #333; /* 加上背景色，避免下方内容透过头部显示 */
}

h1 {
  font-size: 39px;
  color: rgba(255, 255, 255, 0.842);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0; /* 去掉h1默认的底部外边距，避免和导航栏之间留空 */
  padding: 15px 18px;
}

ul {
  list-style-type: none;
  /* 删掉多余的position: fixed和top: 80px */
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* 不需要重复设置背景色，直接继承header的即可 */
}

第二步：给内容容器添加顶部间距 #

现在头部是一个完整的固定块，咱们只需要给.content设置足够的margin-top，让它刚好避开固定头部的高度就行。你可以根据头部的实际渲染高度调整数值，比如：

.content{
  display: block;
  color: white;
  margin-top: 140px; /* 这个值略大于头部的总高度，确保不会出现重叠 */
}

额外优化：让导航项横向排列（可选） #

如果你的导航是想横向展示的，可以给li加个display: inline-block：

li {
  display: inline-block;
}

这样调整后，固定头部会稳稳停在页面顶部，下方的内容也会自动避开它，不会再出现重叠问题啦。

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