1. 大白話解釋sticky定位
粘性定位通俗來說，它就是相對定位relative和固定定位fixed的結合體，它的觸發過程分為三個階段
在最近可滾動容器沒有觸發滑動之前，sticky盒子的表現為相對定位relative【第一階段】，
但當最近可滾動容器觸發滾動，父元素出現在最近可滾動容器的可視區并且滾動距離達到粘性定位sticky的要求時（比如top: 100px），sticky盒子的表現為固定定位fixed【第二階段】，
接著滾動，當sticky盒子的父元素消失在最近可滾動容器的可視區時，sticky盒子會重新表現為相對定位relative【第三階段】，
也就是說它不再固定，會隨著父元素消失在最近可滾動容器的可視區。
結合上面的描述，我們可以總結粘性定位的位置受兩個東西的影響：
- 父元素：父盒子不在最近可滾動容器可視區時，sticky盒子始終表現為相對定位。
- 最近可滾動的容器：設置sticky時使用的top、left等屬性是相對的就是可滾動的容器，只要容器的overflow不是visible【容器不設置overflow就默認是visible】那么容器就是可滾動容器，如果盒子的祖先們沒找到可滾動容器，那么body就作為可滾動容器，因為body是默認可滾動的。
2. 代碼體會sticky定位
下面我們結合代碼來理解：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin重疊問題</title><style>* {padding: 0;margin: 0;}.parent {width: 400px;height: 600px;background-color: tomato;overflow: visible;}.sticky {width: 200px;height: 200px;background-color: gold;/* 粘性定位 */position: sticky;top: 0px;}.box-top,.box-bot {width: 400px;background-color: pink;}.box-top {height: 200px;}.box-bot {height: 1000px;}</style>
</head><body><div class="box-top"></div><div class="parent"><div class="sticky">吸頂盒子</div></div><div class="box-bot"></div>
</body></html>
3. sticky生效的情況
sticky失效情況有：
- 未指定top、right、bottom或left其中的一個
- 父元素的高度小于sticky元素
- 沒有找準sticky元素需要參考的最近可滾動元素
- 如果參考的可滾動元素是body，那么父元素的overflow必須是visible，不能是其他任意值
參考博客：position：sticky失效問題剖析
參考視頻：粘性定位
)
