position的sticky属性

转载已于 2024-06-07 10:36:17 修改 · 329 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/JiangLittleBai/article/details/108653463

文章标签：

#javascript #前端

于 2024-03-07 16:03:07 首次发布

本文主要介绍了position:sticky属性。设置该属性的元素不会脱离文档流，在区域内不受定位影响，移出区域时定位变成fixed。同时指出使用该属性必须注意的点，如效果受制于父级元素，父级元素overflow设置、高度等有要求，且需指定至少一个定位值。

position:sticky

1.设置了position:sticky的元素并不会脱离文档流。

1.当元素在区域内，元素不受定位的影响（top、left等设置无效）
2.当发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，像是fixed效果;

  <div class="sticky">
        position:sticky
  </div>
 .sticky{
      width:300px;
      height: 40px;
      background-color: lightseagreen;
      position:sticky;
      top:0;
      z-index:1;
 }

2、必须注意的点

设置了position:sticky的元素的效果完全受制于父级元素。

此外，还遵循以下条件

1.父级元素不能有任何overflow:visible以外的overflow设置。即使是scroll或者auto也不行。
2.父元素的高度不能低于sticky元素的高度
3.同一父容器中的sticky元素，当滚动的一定位置时，后面的会覆盖前面的;
4.sticky元素如果不属于相同父元素，但是他們的父元素正好紧密相连，则会挤开原来的元素，形成依次占位的效果。
5.必须制定top,left,bottom,right四个中的至少一个，否则其行为与相对定位相同，并且top和bottom同时设置时，top的优先级高；
left和right同时设置时，left的优先级高;