In this example the inner grey div should be behaving like a sticky div - so it sticks to the top of the screen when you scroll down the page - but that ain't happening! What have I got wrong?
<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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>The outer div has only the sticky element as a child so it has nothing to scroll.
If you add the content inside the outer div it works fine.
div {
background: linear-gradient(white, blue);
}
div div {
background: grey;
}<div style="position: absolute; top: 150px; left: 150px; border: 1px solid red">
<div style="position: sticky; top: 0; padding: 20px; margin: 30px">
Richard is the best
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>