position 属性指定了元素的定位类型。
元素可以使用的顶部，底部，左侧和右侧属性定位。
然而，这些属性无法工作，除非是先设定position属性。
他们也有不同的工作方式，这取决于定位方法。
position的属性值共有四个常用的：static、relative、absolute、fixed。
还有三个不常用的：inherit、initial、sticky
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right或者 z-index
声明在position为static的情况下无效。
其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
top / right / left / bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移而margin是占据文档空间的。
absolute
使用absolut定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的，而且一定要是直系祖先才算。如果元素没有已定位的父元素，那么它的位置相对于 html
relative和static方式在最外层时是以body标签为定位原点的，而absolute方式在无父级是position非static定位时是以html作为原点定位，html和body元素相差大概有9px左右。
absolute 定位使元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
absolute定位要加 top:0; left:0
因为我们如果使用absolute或fixed定位的话，必须指定 left、right、 top、 bottom属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因.
祖先类的margin会让子类的absolute跟着偏移，而padding却不会让子类的absolute发生偏移。因为就是absolute是根据祖先类的border进行的定位。
(absolute)定位对象在可视区域之外会导致滚动条出现。而放置(relative)定位对象在可视区域之外，滚动条不会出现
不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了
fixed
生成固定定位的元素，相对于浏览器窗口进行定位。即使窗口是滚动的它也不会移动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed定位使元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠
在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。
fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display之变更为block。
2.会让元素脱离文档流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
sticky
粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix。
写法如下：
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
inherit
规定应该从父元素继承 position 属性的值。
该关键字可指定一个属性应从父元素继承它的值，可用于任何 HTML 元素上的任何 CSS 属性。
initial
设置该属性为默认值
initial 关键字用于设置 CSS 属性为它的默认值，可用于任何 HTML 元素上的任何 CSS 属性。
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
这只是指同级元素间的堆叠。
父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
使用static 定位或无position定位的元素z-index属性是无效的。
文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。浮动、绝对定位和相对定位会使元素脱离文档流。
参考于w3c，简书的一些手册，文章。
参考于
作者：南木小屋
链接：https://www.jianshu.com/p/a116022c6c99