如何让嵌套子div在父级容器层级实现CSS粘性定位

你当前的stickySection仅在滚动到直接父级actionsWrapper时表现粘性，核心原因是position: sticky的生效范围被直接父级的高度限制——actionsWrapper只有500px高度，当滚动超出这个父级区域后，sticky元素会跟着父级一起离开视口。要让它在浏览textWrapper时也固定在页面底部，可通过以下两种方式解决：

方案一：调整元素层级（推荐） #

把stickySection从actionsWrapper中移出，作为mainWrapper的直接子元素，让它的粘性定位参考整个mainWrapper（或视口），覆盖textWrapper的滚动区域。

修改后的HTML #

<div class='mainParent'>
  <div class='mainWrapper'>
    <div class='textWrapper'>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
      <p>Lorem ipsom donor</p>
    </div>
    <div class='actionsWrapper'></div>
    <!-- 移至mainWrapper直接子级 -->
    <div class='stickySection'></div>
  </div>
</div>

修改后的CSS #

.mainParent{
  height: 2000px;
}
.mainWrapper{
  background-color: green;
  height: 100%;
}
.actionsWrapper{
  height: 500px;
  background-color: yellow;
}
.stickySection{
  height: 70px;
  position: sticky;
  bottom: 0;
  background-color: black;
  width: 100%; /* 确保宽度铺满容器 */
}
.textWrapper{
  background-color: blue;
}
.textWrapper p{
  margin-bottom: 15px;
}

方案二：不修改HTML，调整父级布局 #

如果不想改动HTML结构，需要让actionsWrapper的高度覆盖整个mainWrapper，同时通过布局让stickySection固定在底部，扩大sticky的生效范围：

修改后的CSS #

.mainParent{
  height: 2000px;
}
.mainWrapper{
  background-color: green;
  height: 100%;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}
.actionsWrapper{
  flex: 1; /* 占据mainWrapper剩余全部高度，取消固定500px限制 */
  background-color: yellow;
}
.stickySection{
  height: 70px;
  position: sticky;
  bottom: 0;
  background-color: black;
  width: 100%;
}
.textWrapper{
  background-color: blue;
}
.textWrapper p{
  margin-bottom: 15px;
}

关键原理说明 #

• position: sticky的粘性效果是相对于最近的未设置overflow: hidden/auto/scroll的祖先元素，若所有祖先都无滚动属性，则参考视口。
• 父元素的高度直接决定sticky元素的“粘性生效范围”——只有当父元素处于视口内时，sticky才会触发固定效果。因此要覆盖更大的滚动区域，必须让sticky的参考容器高度足够覆盖目标区域。

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