如何让position:sticky元素脱离文档流并实现指定布局？

核心思路是利用position: sticky特性，结合网格布局的跨列设置，让汉堡菜单滚动到顶部后固定，同时通过层级控制覆盖内容区，无需使用fixed或absolute。

修改后的完整代码 #

<header>This is the header.</header>
<section class="content-section">
  <div class="sticky-navigation">
    <p class="burger">This is where the burger menu would go</p>
  </div>
  <div class="content">
    <h1>Big title</h1>
    <p>This is where all of the content would go. Repeated to simulate my page. This is where all of the content would go. Repeated to simulate my page. This is where all of the content would go. Repeated to simulate my page.</p>
  </div>
</section>

header {
  padding: 1rem;
  background: red;
}

.content-section {
  display: grid;
}

.sticky-navigation {
  padding: 0.5rem;
  background: blue;
  position: sticky;
  top: 0; /* 滚动至视口顶部时固定 */
  z-index: 10; /* 确保菜单在内容上方 */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  max-width: 8rem;
  justify-self: end; /* 保持右对齐 */
  grid-column: 1 / -1; /* 跨所有网格列，实现覆盖 */
}

.content {
  background: green;
  padding: 1rem;
  padding-bottom: 15rem;
  grid-column: 1 / -1; /* 内容占满所有网格列 */
}

h1 {
  margin-bottom: 3rem;
}

实现原理 #

1. 粘性定位：position: sticky让菜单在滚动到top:0位置时固定，同时保留其在文档流中的逻辑位置，确保初始状态下位于header下方。
2. 网格跨列：grid-column: 1 / -1让菜单和内容都占据所有网格列，打破原网格项的布局限制，实现菜单对内容的覆盖效果。
3. 层级控制：z-index:10确保菜单始终显示在内容上方，避免被内容遮挡。
4. 右对齐保持：justify-self: end维持汉堡菜单的右浮效果，替代原有的margin-left:auto，两种方式可按需选择。

该方案完全使用CSS实现，不会影响移动端性能，同时满足所有需求。

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