CSS实现顶部固定导航菜单时banner消失问题咨询

安全阿岳

2026-10-2

固定顶部导航菜单实现方案

你现有代码存在两处核心问题：

重复定义height属性，后设置的80px会覆盖前面的100vh，且position: relative为相对定位，不会脱离文档流，滚动时会跟随页面移动
冗余的overflow: hidden属性可能遮挡内部banner内容，导致banner消失

方案一：永久固定顶部（`position: fixed`实现）

适用于需要导航从页面加载开始就一直固定在视口顶部的场景：

#header {
  /* 核心固定配置 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  /* 样式配置 */
  width: 100%;
  height: 80px;
  background-size: cover;
  background-attachment: fixed;
  background-image: url("你的背景图地址");
}
/* fixed定位会脱离文档流，为避免下方内容被导航遮挡，需给body添加与导航高度相等的顶部内边距 */
body {
  padding-top: 80px;
  margin: 0;
}

方案二：滚动吸顶（`position: sticky`实现）

适用于导航初始位于页面其他位置，滚动到视口顶部后才固定的场景：

#header {
  /* 核心吸顶配置 */
  position: sticky;
  top: 0;
  z-index: 9000;
  /* 样式配置同fixed方案 */
  width: 100%;
  height: 80px;
  background-size: cover;
  background-image: url("你的背景图地址");
}

使用position: sticky需满足两个生效条件：