如何无显式高度/margin-top实现position:fixed div依次堆叠

存在满足要求的纯CSS实现，核心是用position: sticky替代传统position: fixed实现顶部固定效果，配合Grid布局天然的流式排布特性，全程不需要设置固定高度、margin-top偏移，也不需要JavaScript介入，自动适配所有响应式断点。

原代码问题 #

两个顶部栏都设置position: fixed+top: 0时，元素会完全脱离正常文档流，浏览器不会自动计算相邻固定元素的位置偏移，所有元素都会重叠在视口最顶部，这也是之前必须手动设置高度/边距适配的根本原因。

实现效果参考 #

修改后完整代码 #

CSS部分 #

body {
  text-rendering: optimizespeed;
  height: 100%;
  margin: 0;
  background-color: rgb(241, 241, 241);
}

#root {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.ours {
  border: 10px solid blue;
  position: sticky;
  top: 0;
  z-index: 999;
  background: #f1f1f1;
}

main {
  overflow: auto;
  position: relative;
}

.third-party {
  align-items: center;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  display: grid;
  grid-template-areas: "leading center trailing";
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  border: 3px solid green;
}

.scroller {
  min-height: 150vh;
  border: 10px solid red;
}

HTML部分 #

原有HTML结构无需调整，直接复用即可：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link type="text/css" rel="stylesheet" href="/src/styles.css" />
  </head>

  <body>
    <div id="root">
      <header class="ours">Should be no.1</header>
      <main>
        <div class="third-party">
          <header>should be no.2</header>
        </div>
        <div class="scroller">
          scroller should come after 2
        </div>
      </main>
    </div>
  </body>
</html>

方案特性 #

• 两个顶部固定栏高度完全由内容撑开，不需要写死任何固定高度值，响应式场景下自动适配
• 粘性定位特性会自动计算相邻固定栏的偏移：第二个顶部栏会自动贴在第一个栏的下方，不需要手动设置margin-top或top偏移值
• 滚动区域自动从第二个固定栏下方开始，内容不会被固定栏遮挡
• 保留原有层级关系：第三方栏z-index更高，符合原代码的层级设计
• 无任何JavaScript逻辑，滚动性能和原生fixed定位一致

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