CSS Grid子元素使用position:sticky失效问题求助

问题原因 #

1. CSS笔误：header的grid-auto-columns属性中写了无效单位16pz，应为16px，该错误会导致Grid列布局异常，干扰元素定位逻辑。
2. Sticky定位范围受限：#nav-container被包裹在<header>的Grid容器内，而<header>会随页面滚动整体移出视口。position: sticky仅在最近的可滚动祖先容器范围内生效，当<header>滚出视口时，内部的sticky元素也会随之消失，无法固定在页面顶部。

修复步骤 #

步骤1：修正CSS笔误 #

将header中的列定义代码修改为：

header {
  display: grid;
  grid-auto-columns: 16px auto 16px;
  grid-template-areas: ". header .";
}

步骤2：调整布局让Sticky元素相对于视口生效 #

要实现导航固定在页面顶部，需确保sticky元素的定位范围为视口，而非<header>容器。以下两种方式可选：

方式一：调整Grid结构

修改<header>内层Grid的布局规则，让导航跨列并设置有效粘性定位：

header > div {
  grid-area: header;
  display: grid;
  grid-template-areas: 
    "logo logo"
    "nav nav";
  grid-template-columns: repeat(2, 1fr);
}
#guide-container {
  grid-area: guide;
  grid-column: 1 / -1;
}
#nav-container {
  grid-area: nav;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

方式二：抽离导航容器

将导航从<header>的Grid布局中独立出来，直接绑定视口粘性：

<header>
  <div>
    <section id="logo-container">
      <a href="#hero">Logo</a>
    </section>
    <section id="guide-container">
      <button class="show-md" id="guide-text-btn">Survival Guide</button>
    </section>
  </div>
</header>

<section id="nav-container">
  <nav id="main-nav">
    <ul>
      <li><a href="#history">History</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#skynet">Skynet</a></li>
    </ul>
  </nav>
</section>

<section id="hero"></section>

对应CSS：

#nav-container {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  padding: 0 16px;
}

效果验证 #

完成修复后滚动页面，导航会固定在页面顶部，不再随<header>滚出视口。

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