容器内Position Sticky属性失效无法实现元素吸顶效果求助

• 节点顺序与父容器高度不匹配：#img-caption 放在<img>标签之后，你的图片高度设为774px，说明文字初始渲染位置就在页面774px高度处，而它的直接父容器#img-div总高度仅778px，留给说明文字的滚动空间只有4px。页面滚动时还没等说明文字到达视口顶部，父容器就已经完全滚出视口，sticky效果自然无法触发。
• sticky生效规则限制：position: sticky的元素仅能在其直接父容器的可视范围内保持固定，父容器离开视口后，sticky元素会跟着父容器一起滚动消失。如果你的需求是说明文字在整个页面滚动过程中都吸顶，就不能把它放在高度有限的#img-div容器内。

如果你要实现「滚动到图片区域时，说明文字吸顶，直到整个图片区域滚出视口后才跟着消失」的效果，调整代码如下：

修改后的HTML #

<div id="img-div">
  <!-- 把说明文字移到图片前面 -->
  <p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
  <img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
</div>

修改后的CSS #

html{
  width: 100vw;
}

body{
  width: 100%;
  margin: auto;
  /* 给body加足够高度模拟滚动场景，你实际页面有内容可删除这行 */
  min-height: 200vh;
}

h1{
  position: absolute;
  z-index: 5;
}

#img-div{
  /* 移除父容器的relative定位，避免影响sticky滚动上下文计算 */
  height: 778px;
  width: 100%;
}

#image{
  background-repeat: no-repeat;
  height: 774px;
  width: 100%;
  object-fit: cover;
}

#img-caption{
  position: sticky;
  font-size: 19px;
  height: 9.5em;
  width: 21em;
  padding: 23px 13px 20px 23px;
  margin: 0;
  background-color: white;
  opacity: 70%;
  top: 0px;
  z-index: 5;
}

如果你需要说明文字在整个页面滚动时一直固定在顶部，直接把#img-caption从#img-div中拿出来，作为body的直接子元素即可。

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