CSS position的sticky定位

最新推荐文章于 2024-05-14 18:14:19 发布

坑爹坑钱坑你妹°

最新推荐文章于 2024-05-14 18:14:19 发布

阅读量598

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_53612668/article/details/121072015

版权

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>