其他分享
首页 > 其他分享> > CSS position的sticky定位

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>

标签:值时,right,top,sticky,设置,position,CSS
来源: https://blog.csdn.net/m0_59181541/article/details/121078346