CSS layouts: sticky positioning

stick positioning as it were: it with the "normal" document flow and move, until a predetermined position and then, "stuck" there; or when, if it finds that they can follow the "normal" document flow and out of sticky position, decisively leave so Join document flow.

Effect code as follows:

<div  style="height: 200px; overflow:scroll;">
    <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header A</p>
    <p>This is content A</p>
    <p>This is content A</p>
    <p>This is content A</p>
    <p>This is content A</p>

    <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header B</p>
    <p>This is content B</p>
    <p>This is content B</p>
    <p>This is content B</p>
    <p>This is content B</p>
    
    <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header C</p>
    <p>This is content C</p>
    <p>This is content C</p>
    <p>This is content C</p>
    <p>This is content C</p>

    <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header D</p>
    <p>This is content D</p>
    <p>This is content D</p>
    <p>This is content D</p>
    <p>This is content D</p>

</div>

The title line sets the background color. If not set the background color (background transparent), the title line of text and the text will be correctly displayed document flow overlap.

sticky positioned elements will cover rolling from the "normal" document flow; sticky elements behind the override earlier sticky element, like a layer of sticky notes.

This is header A

This is content A

This is content A

This is content A

This is content A

This is header B

This is content B

This is content B

This is content B

This is content B

This is header C

This is content C

This is content C

This is content C

This is content C

This is header D

This is content D

This is content D

This is content D

This is content D