• CSS布局:sticky定位


    stick定位一如其名:它随“正常”文档流而动,直到规定位置,尔后“粘”在那里;或者,当它发现自己可以跟随“正常”文档流而脱离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>

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

    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

  • 相关阅读:
    Freemarker与Springmvc
    Freemarker与普通java
    Freemarker与Servlet
    跳舞的时间插件
    video标签播放视频
    字符串反转
    菲波拉契数列
    求所有子数组的和的最大值
    Spring AOP 5种通知与java动态代理
    线程维护日志队列
  • 原文地址:https://www.cnblogs.com/byeyear/p/11999334.html
Copyright © 2020-2023  润新知