CSS position
1. position property
- static
- relative
- fixed
- absolute
- sticky
2. static
static 是 position 属性的默认值。如果省略 position，默认就是 static。
static 的元素处于网页正常流里面正常的位置。
这个时候设置 top，right，bottom，left的话完全不起作用。
3. relative
relative是相对于默认位置（相对于 static，正常流中的正常位置）进行偏移，即定位基点是元素的默认位置。
relative必须使用 <top> | <bottom> | <left> | <right> 这四个属性一起使用，用来指定便宜的方向和距离。
div {
position: relative;
top: 20px;
}
4. absolute
absolute是相对于上级元素（一般是父元素），即定位基点是父元素。倘若父元素为static定位的话，定位基点就会变成网页的根元素 html。
absolute 也要搭配 top、right、bottom、left 一起使用。
<div id="father">
<div id="son">
</div>
</div>
<style>
#father {
position: relative;
}
#son {
position: absolute;
top: 20px;
}
</style>
父元素是 relatve 定位，子元素是 absolute 定位，所以子元素定位基准点是父元素，相对于父元素的顶部向下偏移 20 px。如果父元素是 static 定位，上面的例子就是距离网页的顶部向下偏移 20px。
张鑫旭大佬说，position：absolute 与float：left 是近亲。两者有两大共性：包裹性、破坏性。具体可以来这里看：https://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E4%B8%80%EF%BC%89/
包裹性
包裹性换种说法就是让本来行内正常流的盒子 inline-block 化，例如一个 div 块的默认宽度是 100%的，一旦被 position 属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。
破坏性
浮动的破坏被别人诟病，清除浮动很烦人。
但是，position：absolute 的破坏性是更猛的，浮动的破坏性可以 clearfix 来清除，但是 position：absolute的破坏是无法被修复的。
所以总结就是，absolute 能不用就尽量不用，千万别滥用。有的属性滥用就是单纯的多点代码，而有点属性的滥用给后期的维护造成很大的麻烦。
5. fixed
fixed 是相对于 viewport 进行偏移。定位的基点是你的显示器中网页的左上角。元素的位置不会变，固定到浏览器窗口上。
搭配 top、bottom、left、right 使用，如果不适用这四个属性，默认就是元素本身的位置。
div {
position: fixed;
top: 0;
}
6. sticky
sticky跟前面的属性值都不一样，是 css3 新增的属性。
这个东西很奇妙，有些时候是relative，有些时候是fixed。大多用来做网页的搜索栏、表头的固定、堆叠效果这些。
具体规则: 当页面滚动，父元素开始脱离视口（部分开始看不见的时候），只要与 sticky 元素的距离达到生效门槛，relative定位就会自动切换到 fixed 定位。等父元素完全脱离视口（不见的时候），fixed 定位自动切换为 relative 定位。
#toolbar {
position: -webkit-sticky;
position: sticky;
top: 20px;
}
上面代码中，页面向下滚动时，#toolbar的父元素开始脱离视口，一旦视口的顶部与#toolbar的距离小于20px（门槛值），#toolbar就自动变为fixed定位，保持与视口顶部20px的距离。页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），#toolbar恢复成relative定位。
stickyd详解的两篇文章
7. 问题
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
直接看这篇文章。
