CSS---绝对定位、相对定位、粘性定位

position: absolute; 绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即设置了绝对定位或者相对定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

position: relative;相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置），然后通过设置垂直或水平偏移，让这个元素“相对于”它的原始起点进行移动；

position: sticky; 粘性定位：它是结合relative相对定位和fixed固定定位于一体的特殊定位方式。
它随“正常”文档流而动，直到规定位置，尔后“粘”在那里；或者，当它发现自己可以跟随“正常”文档流而脱离sticky位置时，就果断离开从而加入文档流。

<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>