CSS position的sticky定位

position: sticky -粘性定位(是css新增的一个position属性)

使用注意事项:

    父元素不能有 overflow 属性

    left、top、right、bottom必须要设置一个

    仅在父元素内生效,父元素的高度必须大于sticky元素设置的高度

    简单理解就是,当你页面滚动的距离小于你设置的 left、top、right、bottom的值时
    position: sticky 就相当于 position:relative

    当你页面滚动的距离小于你设置的 left、top、right、bottom的值时

    position: sticky 就相当于 position:fixed

代码展示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            /*粘性定位,当用户滑动的距离超过top设置的值时,就相当于position:fixed定位
              当用户滑动的距离没超过top设置的值时,就相当于position:relative定位*/
              .csstricky{
                position: sticky;
                width: 30px;
                height: 30px;
                background: aqua;
                top: 50px;
            }
            #fs{
                height: 2000px;
                width: 100%;
            }
            #ad{
                height: 300px;
                width: 100%;
                background:black;
            }
        </style>
    </head>

    <body>
        <div id="fs">
            <div id="ad"></div>
            <div class="csstricky"></div>
        </div>
    </body>
</html>

上一篇:喜报丨京东科技主导的开源项目ShardingSphere荣登报告榜单国人主导开源项目中活跃度第五名!


下一篇:[shardingSphere 使用与场景2] shardingSphere 分库分表配置