CSS中position属性回顾
今天咱们来唠唠css中position这个属性，这个属性有static、relative、absolute、fixed、inherit和sticky这几个值，其中前四种都很常见，sticky这个我们最后着重说一下。
首先我们先来说一下平时比较常用的
1、position: static
static是position的默认值，元素处于正常的文档流中。
2、position: relative
relative，相对定位，元素相对于原本位置的定位，元素原本的位置会被保留，其他的元素不受影响。
3、position: absolute
absolute，绝对定位，有两种情况：
1) 设置了absolute的元素如果有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果没有设置了position属性的祖先元素，则此时相对于body进行定位。
4、position: fixed
fixed，固定定位，fixed元素总是相对于可视窗口定位的。
接下来是一个很少用到的属性（至少本人在实际开发中基本不会用到）
position: inherit
inherit，继承父元素的position属性，新属性，需要考虑兼容问题。
最后，我们来唠唠sticky这个属性，相信还有好多小伙伴对这个属性还比较陌生，这个是我前阵子看帖子的时候看到的，感觉还是挺实用的，所以给大家安利一下
position: sticky
sticky这个属性有趣的地方在于，这个元素原本的位置也会被保留，当设置了这个属性，该元素的位置将要移出偏移范围时，定位就会像fixed一样，根据设置的left、top等属性成固定位置的效果，简单点说就是一些吸顶或者吸底的功能可以用这个属性来解决。
sticky目前还不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。基本上这个属性使用的浏览器只有FireFox和iOS的Safari，所以使用的同学可以根据需求取舍。
sticky属性有以下几个特点：
- 该元素仍然保留元素原本在文档流中的位置。
- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于可视窗口来计算元素的偏移量
下面放一个demo的代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .fa{ width: 100%; height: 200vh; background: #faa; } .son{ width: 100px; height: 100px; background: #afa; position: sticky; top: 0px; } </style> </head> <body> <div class="fa"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <div class="son"></div> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </div> </body> </html>
