如何使粘性表头（sticky header）相对于parent容器而非section生效？

我明白你的需求了——现在每个section里的表头只在自己的区块内粘性，你想要让这三个表头在整个.parent容器滚动时，依次固定在顶部，形成堆叠的粘性效果对吧？

咱们来一步步修改代码：

问题分析 #

原来的代码里有两个关键问题：

1. top 属性的值没有单位（比如top: 50应该是top: 50px），这会导致sticky定位失效；
2. 每个<h1>的粘性包含块是各自的.section-*容器，所以只会在自己的section里固定，不会在整个.parent范围内生效。

修改后的完整代码 #

HTML（结构无需调整，保持原样）

<div class="parent">
  <div class="section-one">
    <h1>Header 1</h1>
    <div class="content">content 123<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  </div>
  <div class="section-two">
    <h1>Header 2</h1>
    <div class="content">content 789<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  </div>
  <div class="section-three">
    <h1>Header 3</h1>
    <div class="content">content 456<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  </div>
</div>

CSS（核心修改部分）

.parent {
  position: relative;
  /* 关键：设置overflow和固定高度，让sticky的包含块切换为.parent */
  max-height: 600px;
  overflow-y: auto;
}

/* 给所有section的h1统一设置基础样式 */
.section-one h1,
.section-two h1,
.section-three h1 {
  position: sticky;
  margin: 0; /* 去掉默认margin，避免布局错位 */
  padding: 1rem;
  background: white; /* 设置背景色，防止下方内容穿透表头 */
  z-index: 9999;
}

/* 依次设置每个表头的top值，形成堆叠固定效果 */
.section-one h1 {
  top: 0;
}

.section-two h1 {
  top: 58px; /* 数值要匹配Header1的实际高度（字体+padding），可根据需求调整 */
}

.section-three h1 {
  top: 116px; /* 等于Header1高度 + Header2高度 */
}

/* 给内容区加内边距，避免和表头重叠 */
.content {
  padding: 1rem;
}

关键说明 #

1. 调整.parent的容器属性：设置overflow-y: auto和固定高度，是为了让<h1>的粘性包含块从各自的section切换为整个.parent容器，这样表头会在parent的滚动范围内生效；
2. 统一表头基础样式：添加背景色是为了防止滚动时下方内容透过表头显示，去掉默认margin避免布局错位；
3. 精准设置top值：每个后续表头的top值要等于前面所有表头的总高度，这样滚动时会依次顶上去，形成堆叠固定的效果。你可以根据自己的表头实际高度（字体大小、padding等）来调整数值。

如果你的表头高度是动态变化的，也可以用JavaScript计算并设置top值，但静态场景下用CSS就足够啦。

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