如何让<nav>元素脱离父元素固定在页面顶部（无需JS）

要让<nav>滚动到顶部后始终固定，不受父元素限制且无需JavaScript，有两种可行方案，核心是打破父元素对定位的限制：

方案一：调整HTML结构（推荐） #

将<nav>从<header>中移出，作为<body>的直接子元素。此时position: sticky会相对于整个文档视口生效，不再受<header>的高度范围约束。

修改后的HTML结构：

<body>
  <header id="header">
    <figure id="img-box">
      <img id="header-img" src="https://www.adorama.com/alc/wp-content/uploads/2017/11/shutterstock_170805947.jpg">
    </figure>
  </header>
  <nav>
    <ul>
      <li><a class="nav-link" href="#section-one">Section One</a></li>
      <li><a class="nav-link" href="#section-two">Section Two</a></li>
      <li><a class="nav-link" href="#section-three">Section Three</a></li>
    </ul>
  </nav>
  <main>
    <!-- 原main内容保持不变 -->
  </main>
</body>

原有nav的CSS样式无需修改：

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18vh;
  border-top: 3px solid white;
  background-color: var(--accent-two-light);
  position: sticky;
  top: 0;
  z-index: 999;
}

方案二：使用fixed定位（无需调整结构） #

如果不想改动HTML结构，可将nav的定位改为fixed，直接固定在视口顶部。但需给<main>添加顶部外边距，避免页面内容被导航栏遮挡：

修改后的CSS代码：

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18vh;
  border-top: 3px solid white;
  background-color: var(--accent-two-light);
  position: fixed; /* 替换原sticky定位 */
  top: 0;
  left: 0;
  width: 100%; /* 确保导航栏占满横向宽度 */
  z-index: 999;
}

main {
  margin: calc(2rem + 18vh) auto; /* 原margin-top基础上增加nav的高度 */
}

问题根源说明 #

你之前使用position: sticky失效，是因为sticky元素的生效范围被父元素<header>限制——当<header>整体滚出视口后，nav会跟随父元素离开，无法继续保持在顶部。上述两种方案分别通过调整结构让sticky相对视口生效，或直接用fixed脱离文档流，均能解决该问题。

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