粘性定位

最新推荐文章于 2023-02-27 16:28:00 发布

weixin_46032763

最新推荐文章于 2023-02-27 16:28:00 发布

阅读量5.9k

点赞数

本文链接：https://blog.csdn.net/weixin_46032763/article/details/106659323

版权

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            height: 2000px;
        }
        
        .box1 {
            position: sticky;
            top: 100px;
            margin: 100px auto;
            width: 30px;
            height: 90px;
            background-color: pink;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box1">
    </div>
</body>

在这里插入图片描述
当box距离文档可视区域顶栏100px时，变为固定定位，无论怎么拉动滚动栏，box距离文档可视区都保持100px不变，由于Box margin-top为100px，所以从开始拉滚动条到结束，box相对文档可视区没有变过。

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            height: 2000px;
        }
        
        .box1 {
            position: sticky;
            top: 100px;
            margin: 10px auto;
            width: 30px;
            height: 90px;
            background-color: pink;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box1">
    </div>
</body>

在这里插入图片描述
有滚动栏位于初始位置可知，box top为100px，margin-top为10px，所以直到滚动条滚动到结束，box相对于文档可视区相对位置保持不变

 <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            height: 2000px;
        }
        
        .box1 {
            position: sticky;
            top: 0px;
            margin: 100px auto;
            width: 30px;
            height: 90px;
            background-color: pink;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box1">
    </div>
</body>

在这里插入图片描述由第一图滚动初始box top-0,margin-top=100,当滚动条从0到100Px之间，box随着滚动条而向上滚动，等距离文档可视区100px，之后滚动条即便滚动，Box相对文档可视区位置不再变化

粘性定位的特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE 不支持。

weixin_46032763

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
粘性定位

<style> * { padding: 0; margin: 0; } body { height: 2000px; } .box1 { position: sticky; top: 100px; margin: 100px auto;
复制链接

扫一扫