CSS布局：sticky定位

stick定位一如其名：它随“正常”文档流而动，直到规定位置，尔后“粘”在那里；或者，当它发现自己可以跟随“正常”文档流而脱离sticky位置时，就果断离开从而加入文档流。

代码与效果如下：

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

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

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

div>

标题行设置了背景色。如果不设置背景色（背景透明），正常文档流的文字就会和标题行文字重叠在一起显示。

sticky定位的元素会遮住滚动而来的“正常”的文档流；后面的sticky元素会覆盖前面的sticky元素，就好像一层层的便利贴。

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