设置position:fixed固定菜单栏后页面内容被遮挡的解决方法咨询

原因 #

设置position: fixed的元素会脱离正常文档流，不再占据原有的页面空间，后续的正文内容会自动向上填充header原本的位置，因此会被固定在顶部的菜单栏遮挡。

解决方案 #

按照以下两步调整代码即可：

• 第一步：完善header的固定定位属性
  打开header样式中position: fixed的注释，补充top: 0、left: 0属性确保菜单栏始终吸附在视口顶部，同时将层级属性设置在header上，避免被其他内容覆盖。
• 第二步：给body添加上内边距
  测量header的实际渲染高度，给body设置同等数值的padding-top，空出菜单栏的占用空间，所有正文内容会默认从菜单栏下方开始显示，滚动时也不会被遮挡。

修改后的完整CSS示例 #

html {
  box-sizing: border-box;
  border: 3px solid green;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  /* 这里的数值和你header的实际高度保持一致即可 */
  padding-top: 80px;
  margin: 0;
}

header {
  border: 5px solid purple;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 3px 10px grey;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
}

.container {
  border: 3px solid goldenrod;
  position: relative;
  background: tomato;
  width: 80%;
  margin: 0 10%;
}

如果你的菜单栏高度是动态变化的，也可以用JS动态计算header高度赋值给body的padding-top，适配不同场景的需求。

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