CSS的position属性区分说明

         首先，CSS的position属性选择有很多，不同浏览器支持的position属性多少有所不同。

        以谷歌为例，position支持absolute、relative、static、fixed、initial、inherit、sticky、unset。但是对于所有浏览器都会支持也是容易弄混的就是position的前面四个参数。

 

常用属性说明：

1. static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略TBLR或者z-index声明）。
2. relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
3. absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
4. fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

 

特别说明：

relative：该元素脱离正常的文本流，但是其在文本流中的位置依然存在。

总是相对于其最近的父元素定位，无论父元素是何种定位方式。

 

absolute：该元素脱离正常的文本流，但是其在正常文本流中的位置不再存在。

该元素默认继承原文档流偏移位置（TBLR），即显示在原文档流位置。

父元素未设置position属性（relative，absolute），相对于body定位，如果设置TBLR，将覆盖原TBLR。

父元素设置position属性（relative，absolute），同时设定TBLR，将相对于父元素定位。

 

推荐一篇文档有具体的实例说明：https://segmentfault.com/a/1190000006924181