能否混合使用absolute与sticky定位？嵌套粘性元素为何不生效？

问题代码 #

<div style="position: absolute; top: 150px; left: 150px; border: 1px solid red">
  <div style="position: sticky; top: 0; background-color: #ddd; padding: 20px; margin: 30px">
    Richard is the best
  </div>
</div>

<p>&nbsp;</p>
<!-- 重复占位p标签省略 -->

核心问题 #

position: sticky的生效依赖两个关键前提：

• 元素需要有可滚动的祖先容器（无符合条件的祖先时，以浏览器视口为参照）
• 该祖先容器的高度需大于sticky元素，且存在滚动行为

你的代码中，父容器为position: absolute定位，但它的高度仅由内部sticky元素的内容撑开，既没有设置overflow: auto/scroll开启内部滚动，自身也没有超出视口的滚动空间。当页面整体滚动时，父容器本身不会发生滚动，sticky元素自然无法触发固定定位的逻辑。

修复方案 #

方案1：让sticky相对于视口固定

移除父容器的position: absolute定位，此时sticky元素会以浏览器视口为参照，页面滚动到阈值时固定在顶部：

<div style="border: 1px solid red">
  <div style="position: sticky; top: 0; background-color: #ddd; padding: 20px; margin: 30px">
    Richard is the best
  </div>
</div>

方案2：让sticky相对于父容器固定

给父容器设置足够高度和滚动属性，让父容器内部可滚动，此时sticky元素会在父容器滚动时固定在其顶部：

<div style="position: absolute; top: 150px; left: 150px; border: 1px solid red; height: 500px; overflow: auto;">
  <div style="position: sticky; top: 0; background-color: #ddd; padding: 20px; margin: 30px">
    Richard is the best
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

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