position sticky仅在section内生效，div中失效问题咨询

我遇到了position: sticky的属性问题：外层div包含多个子元素时，设置了position: sticky的h1元素仅在其父级section范围内保持粘性，无法在整个div容器的范围内生效。

相关代码如下：

<div style="position: relative"> 
        <section class="py-4 px-4">
            <h1 style="position: sticky; top: 50px">AQUI O STICKY</h1>
            <h1>VALIDANDO</h1>
            <h1>VALIDANDO</h1>
            <h1>VALIDANDO</h1>
            <h1>VALIDANDO</h1>
            <h1>VALIDANDO</h1>
            <h1>VALIDANDO</h1>
            <h1>VALIDANDO</h1>
            <h1>VALIDANDO</h1>
            <h1>VALIDANDO</h1>
        </section>
        <h1>POSITION</h1>
        <h1>POSITION</h1>
        <h1>POSITION</h1>
        <h1>POSITION</h1>
        <h1>POSITION</h1>
        <h1>POSITION</h1>
        <h1>POSITION</h1>
    </div>

问题原因 #

这是position: sticky的默认特性：粘性元素的粘性范围是最近的可滚动祖先元素，若无可滚动祖先则以视口为范围。但如果它的直接父级（此处为section）先于外层div滚出视口，粘性元素会跟随父级一起离开，无法覆盖整个div容器。

解决方法 #

调整DOM结构，将设置了position: sticky的h1直接作为外层div的子元素，使其父级变为目标范围的div容器：

修正后的代码：

<div style="position: relative"> 
    <h1 style="position: sticky; top: 50px">AQUI O STICKY</h1>
    <section class="py-4 px-4">
        <h1>VALIDANDO</h1>
        <h1>VALIDANDO</h1>
        <h1>VALIDANDO</h1>
        <h1>VALIDANDO</h1>
        <h1>VALIDANDO</h1>
        <h1>VALIDANDO</h1>
        <h1>VALIDANDO</h1>
        <h1>VALIDANDO</h1>
        <h1>VALIDANDO</h1>
    </section>
    <h1>POSITION</h1>
    <h1>POSITION</h1>
    <h1>POSITION</h1>
    <h1>POSITION</h1>
    <h1>POSITION</h1>
    <h1>POSITION</h1>
    <h1>POSITION</h1>
</div>

调整后，h1的粘性范围将覆盖整个外层div，滚动时会一直停留在距离顶部50px的位置，直到整个div滚出视口才会消失。

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