粘性定位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;}

  <div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>

在这里插入图片描述

设置left top，红色方块相对于浏览器窗口偏移，而且以前的位置保留
在这里插入图片描述
为了看的更清楚，验证一下红色方块是相对于浏览器窗口偏移的，给父元素设置一个边框，往下移动100px

当父容器和浏览器窗口距离大于left top,sticky会暂时失效，红色方块会帖在父容器的边上，验证一下，让父容器向下👇向右👉移动200px，这时候left top 是小于父容器到窗口的距离
在这里插入图片描述

只有当滚动条移动到left top值以内，sticky生效，这时红色方块不受滚动条的影响，一直都保持相对于窗口偏移，验证一下，让滚动条向下向右移动
在这里插入图片描述
最后当父容器移动到窗口以外，红色方块会被带走，因为偏移不能超出父容器，这时候请个演员来衬托一下，黑色方块，为了说明问题
4号黑色方块设置绝对定位left top设置各750px，是相对于窗口进行位移的，本来是找有定位元素的父级发生偏移，但是如果没有父级就相对于整个文档偏移，也就是相对于浏览器窗口偏移，红色方块的父级自身距离加上外边距margin的距离一共是700px，当滚动条移动到超过700px红色方块就会消失（跟父容器一起走了）
在这里插入图片描述
没看懂的我把最后的代码放这里，自己复制一下，然后打开页面移动上下左右滚动条试试！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 去掉默认内外边距 */* {margin: 0;padding: 0;}/* 用body撑出滚动条 */body{height: 2000px;width: 4000px;}/* 设置每个小方块的  宽度  和   高度 */div {width: 100px;height: 100px;}/* 设置父容器 */#box{width: 500px;height: 500px;border: 1px solid black;}.box1 {background: red;/* 使用sticky定位 */position: sticky;top: 100px;left: 100px;}.box2 {background: yellowgreen;}.box3 {background: paleturquoise;}.box4{width: 100px;height: 100px;position: absolute;top: 750px;left: 750px;background: black;color: white;font-size: 44px;text-align: center;line-height: 100px;}</style>
</head><body><div id="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div><div class="box4">4</div>
</body></html>