position:sticky（粘性定位）简介

sticky是position属性中新添的一个属性，它可以说是fixed和relative的结合。它主要作用在scroll的监听上，在滚动过程中，当某元素的距离其父元素的距离达到设定的sticky值的时候，这时position：sticky的作用就相当于fixed固定定位，固定在适当的位置，不随滚动条的滚动而发生变化。

使用条件
1. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位；
2. 父元素的高度不能低于sticky元素的高度，否则还没有开始滚动的时候sticky元素就在父元素的底部，不会有任何的作用；
3. sticky元素仅在其父元素内生效，如果父元素都不能滚动的话，那么只能对视口其起作用；
特点
1.该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
2.当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。

当页面开始滚动的时候该块变成fixed定位

测试

我写了一个父元素，设置了overflow：scroll，里面包含了一些子元素，其中一个子元素的css样式设置了position：sticky，再给一个top值，代表了改子元素改变成fixed定位时所在的位置，就实现了该粘性定位的效果。下面给出我的实现代码。

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><link rel=\"stylesheet\" href=\"css/sticky.css\"></head><body><div class=\"father\"><div class=\"container\">我是内容一</div><div class=\"container\">我是内容二</div><div class=\"son\">我是sticky</div><div class=\"container\">我是内容三</div><div class=\"container\">我是内容四</div><div class=\"container\">我是内容五</div></div></body></html>

@charset \"utf-8\";.father {width: 800px;height: 300px;background-color: aqua;overflow: scroll;}.son {width: 800px;height: 30px;background-color: rgb(255, 0, 0);position: sticky;top: 0px;}.container {width: 800px;height: 200px;background-color: rgb(255, 238, 0);}