CSS-position

一直觉得自己的对于CSS的布局欠缺底蕴，这使得我一直对于自己的页面布局能力不自信，所以准备写个CSS系列的读书笔记，即是自我勉励，也是加深理解。

1.position:static

静态位置是默认的布局方式，块级元素生成矩形框，行级元素则会创建一个或者多个行框，显然易见元素是存在文档流内部的。

2.position:relative

相对定位的元素依然在原本的文档流之中，这意味着原本的位置无法被新的元素顶替，我的理解是这个属性只改变了渲染树对于元素的显示，但是没有改变文档树。
其次便是我们可以通过top/bottom/left/right来设置元素相对于原先自身位置的调整。这意味着可能会覆盖其他的元素。

3.position:absolute

绝对定位首先将元素抽离出文档流，这意味着他原本的位置会变成空白，可以被后面的元素顶替。
和相对定位一样，我们也可以通过top/bottom/legt/right这四个属性来调整元素的位置。但是区别在于相对定位的参照物是原先自身的位置，而绝对定位的参照物是他最近一级的外层包含块。
那么，包含块是什么呢？就是最近的position属性不为static的元素。

4.position:fixed

固定定位很类似于绝对定位，可以类比着记忆。固定定位的元素和绝对定位一样被抽离出文档流。
和绝对定位不同的是，固定定位的参照物是浏览器的窗口。这使得他可以轻易的实现类似于固定导航栏和回到顶部按钮这样的功能。

5.position;sticky

粘性定位是CSS3新增的定位方式，非常的有意思，但是浏览器的兼容并不乐观，可以实现relative和fixed效果的混合。
首先附加粘性定位属性的元素还在文档流中。
想要显示出粘性定位的效果，必须在top/bottom/left/right四个属性之一中设置一个阈值。

position:sticky ;
top: 0px;

例如，如上的两条代码可以让元素在滑轮向下滚动的时候令元素在超过top:0这个阈值后一直保持top:0的固定定位状态。