css粘性定位以及定位总结

最新推荐文章于 2024-03-09 16:15:33 发布

lxl211

最新推荐文章于 2024-03-09 16:15:33 发布

阅读量532

点赞数

分类专栏： css 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/lxllxl211/article/details/127163837

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

粘性定位可以被认为是相对定位和固定定位的混合
语法：
选择器{
position:sticky;
top:10px;
}
特点：
1、以浏览器的可视窗口为参照点移动元素（固定定位特点）
2、粘性定位占有原先的位置（相对定位特点）
3、必须+top、bottom、right、left其中的一个才有效
代码举例：

<style>
        body{
            height: 3000px;
        }
        .nav{
            /* 添加粘性定位： */
            position: sticky;
            top: 30px;

            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 90px auto;
        }    
     </style>
</head>
<body>
    <div class="nav">
          
    </div> 
</body>

运行结果：
在这里插入图片描述
就是可以随便移动滚动条，而且方块保持在固定位置
定位总结：

lxl211

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css粘性定位以及定位总结

3、必须+top、bottom、right、left其中的一个才有效。1、以浏览器的可视窗口为参照点移动元素（固定定位特点）就是可以随便移动滚动条，而且方块保持在固定位置。粘性定位可以被认为是相对定位和固定定位的混合。2、粘性定位占有原先的位置（相对定位特点）
复制链接

扫一扫