其他分享
首页 > 其他分享> > 粘性定位相关理解

粘性定位相关理解

作者:互联网

粘性定位,之前为相对定位,top值不生效,当到达这个top值的时候才开始固定。

粘性定位top值之前

top值之后

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .before{

            width: 100%;

            height: 100vh;

            background: red;

        }

        .a{

            position: sticky;

            top: 20px;

            background:skyblue;

        }

        .after{

            width: 100%;

            height: 100vh;

            background: purple;

        }

        .d{

            width: 100%;

            height: 100vh;

            background: #f90;

        }

        .b{

            position: sticky;

            top: 120px;

            background:skyblue;

        }

    </style>

</head>

<body>

    <!-- <div class="container"> -->

        <div class="before"></div>

        <div class="a">111</div>

        <div class="d"></div>

        <div class="b">2222</div>

        <div class="after"></div>

    <!-- </div> -->

</body>

</html>

 

标签:定位,top,粘性,height,width,理解,background,100vh,100%
来源: https://blog.csdn.net/weixin_45638909/article/details/117842070