设置z-index后导航栏仍被内容遮挡如何实现导航栏固定在视口顶部

架构老林

2026-10-1

导航栏遮挡问题修复方案

核心问题原因

固定定位的header未设置足够高的堆叠层级，后续的container同级元素默认堆叠在导航栏上方
.container的grid-template-rows属性末尾漏写分号，引发CSS解析异常，加剧布局错乱

具体修改步骤

修改#header选择器样式，新增堆叠层级和背景色，避免透明透出下方内容：

#header {
  display: flex;
  justify-content: space-between;
  margin-left: 0;
  margin-right: 0;
  box-shadow: 0 4px 4px -6px black;
  top: 0;
  position: fixed;
  width: 100%;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  word-spacing: 2px;
  color: black;
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  /* 新增以下两行 */
  z-index: 9999;
  background-color: #ffffff;
}

修正.container选择器的语法错误，可选新增顶部内边距避免页面初始内容被导航栏遮挡：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 原代码此处漏写分号，已补充 */
  grid-template-rows: 1fr 1fr 1fr 1fr 0.3fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". Video ."
    ". Preventivo ."
    "Info Info Info"
    "Costi Costi Costi"
    "Footer Footer Footer";
  /* 可选新增，避免页面顶部内容被固定导航遮挡 */
  padding-top: 70px;
}