sticky粘性定位

最新推荐文章于 2023-04-28 21:43:02 发布

打死不穿格子衫

最新推荐文章于 2023-04-28 21:43:02 发布

阅读量955

点赞数

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_47410267/article/details/115043317

版权

本文介绍了CSS粘性定位sticky的工作原理。sticky元素必须在父容器内，当父容器滚动到浏览器视口范围内，sticky生效，使元素相对于窗口偏移。如果父容器与窗口距离大于left/top设置值，sticky会暂时失效，直到滚动条到达设定范围。通过实例代码展示了如何设置和观察sticky定位的效果。

摘要由CSDN通过智能技术生成

粘性定位sticky

如果不设置偏移量，sticky就不会生效
如果发生偏移，会保留原来位置，
偏移量只能设置 left top 其它的没有效果
只有父容器在浏览器窗口内，sticky才会生效，偏移量是相对于浏览器视口

如果父容器和浏览器视口有一定的距离，而且这个距离大于left和top
则这个偏移量就会失效(贴在父容器上)，当滚动条移动到设置到left top范围内,定位生效，这时会类似于fixed定位，不受滚动条的影响…说不下去了…说点人话吧😂抱歉语言组织能力有限

sticky有点像fixed，使用sticky的元素必须在父容器以内，不能超出父容器，当父容器移动到窗口以外，sticky失效，sticky元素跟随父容器一起移动到窗口外

下面看图

初始代码

	  /* 去掉默认内外边距 */
      * {
   
        margin: 0;
        padding: 0;
      }
      /* 用body撑出滚动条 */
      body{
   
        height: 2000px;
      }
      div {
   
        width: 100px;
        height: 100px;
      }

      .box1 {
   
        background: red;
        /* 使用sticky定位 */
        position: sticky;
      }

      .box2 {
   
        background: yellowgreen;
      }

      .box3 {
   
        background: paleturquoise;
      }