position属性( absolute | relative | static | fixed )详解

一，什么是文档流

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

 只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

二，定位分类

静态定位（static）

html元素默认的定位方式，top, right, bottom, left 和 z-index 属性无效

相对定位(relative) 

（1）相对定位相对的是它原本在文档流中的位置而进行的偏移

（2）它没有脱离文档流，它还占有文档空间，top/left/right/bottom属性生效，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据原来的位置( top / left / right / bottom 等属性生效之前)进行的定位。

（3）margin是占据文档空间的

（4）position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效

 绝对定位(absoulte)

（1）脱离文档流

（2）根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的

（3）使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间

（4）如果top和bottom一同存在的话，那么只有top生效，如果left和right一同存在的话，那么只有left生效

（5）祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位

（6）绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现

（7）绝对定位的元素可以设置外边距（margins），且不会与其他边距合并

固定定位（fixed）

（1）脱离了文档流

（2）能够根据top、right、left、bottom属性进行定位

（3）fixed是根据窗口为原点进行偏移定位的，不会根据滚动条的滚动而进行偏移

（4）当元素祖先的 transform  属性非 none 时，容器由视口改为该祖先。

三，例子

参考1：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

参考2：https://blog.csdn.net/chen_zw/article/details/8741365