【[CSS] 认识 Position 清晰易懂】 www.bilibili.com/video/BV1iE…
Position：static
static（静态定位）是默认值，元素出现在正常的流中。不会受到top, bottom, left, right影响。
Position：absolute
定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。
Position：fixed
其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。 fixed元素与文档流无关，可重叠也不回影响其他元素布局，只一直根据浏览器左上角定位。 即使卷动页面，fixed元素也在原地。
Position：relative
定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
他是默认参照父级的原始点为原始点定位元素，无父级则以文本流的顺序在上一个元素的底部为原始点定位元素位置，并配合top、bottom、right、left设置偏移确定元素定位：
一般情况下以父级的左上角为原定，在没有父级的时候，他是参照浏览器左上角，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开。
如果父级没有设定position属性，仍旧以父级的左上角为原点进行定位。
如果父级设定position属性，不管是取哪个值，都以父级的左上角为原点进行定位。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位。 以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。
Position：Sticky
如果设置top=0时，向下滚动后，Sticky元素将粘在顶部
什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。
