如何通过CSS让header内的position:sticky元素以body为参照容器

我创建了HTML的header容器并在其中添加了两个div，希望其中一个div通过position:sticky固定在屏幕顶部。但目前只有将该div移出header，设置为body的直接子元素时才生效，这会破坏HTML语义。请问是否可以通过CSS实现无需移动HTML元素，让该元素以body为参照父容器？

代码示例 #

CSS #

body {
  scroll-behavior: smooth font-family: "Inter", Sans-Serif;
  background-color: hsl(36, 100%, 99%);
  margin: 0 1.5rem;
  position: relative;
}

.header_nav {
  position: fixed;
  background-color: hsl(36, 100%, 99%);
  width: 70vw;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: none;
}

img {
  display: block;
  max-width: 100%;
}

.header {
  position: sticky;
  top: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .75rem;
  z-index: 5;
}

HTML #

<header>
  <div class="header">
    <img src="./assets/images/logo.svg" alt="logo" class="header_img" />
    <div class="hamburger header_div"><span></span></div>
  </div>

  <nav class="header_nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">New</a></li>
      <li><a href="#">Popular</a></li>
      <li><a href="#">Trending</a></li>
      <li><a href="#">Categories</a></li>
    </ul>
  </nav>
</header>

解决方案 #

position:sticky的核心逻辑是：元素会相对于最近的可滚动祖先元素（或视口）定位，若父容器存在overflow（非visible）、transform、filter等属性，会创建新的包含块，导致sticky元素以该父容器为参照而非body/视口。针对你的场景，只需调整以下几点：

1. 修复CSS语法错误：body中scroll-behavior: smooth后缺少分号，会导致后续样式失效，补上即可。
2. 确保header不限制sticky：给<header>设置position: static（默认值，若有覆盖需显式声明），同时保证overflow: visible，避免创建新的包含块限制sticky元素的参照范围。
3. 优化sticky元素样式：给.header添加背景色，避免滚动时下方内容穿透；可选增加内边距提升视觉体验。

调整后的完整CSS：

body {
  scroll-behavior: smooth;
  font-family: "Inter", Sans-Serif;
  background-color: hsl(36, 100%, 99%);
  margin: 0 1.5rem;
  position: relative;
}

.header_nav {
  position: fixed;
  background-color: hsl(36, 100%, 99%);
  width: 70vw;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: none;
}

img {
  display: block;
  max-width: 100%;
}

header {
  position: static;
  overflow: visible;
}

.header {
  position: sticky;
  top: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .75rem;
  z-index: 5;
  background-color: hsl(36, 100%, 99%);
  padding: 0.5rem 0;
}

失效原因解析 #

• 原CSS中body的语法错误导致样式异常；
• 若<header>隐含了overflow属性，会让.header的sticky以<header>为参照，而非body/视口；
• 若<header>高度与.header一致，sticky元素没有滚动空间，自然无法触发固定效果。

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