CSS中 position 属性详解

1.positon:relative

relative的相对偏移对象是他自己，即添加了relative属性的对象会以他原本应该所在的位置进行偏移。
不添加relative属性，下图中son1和son2在同一个div中，son3和son4在同一个div中，son5在一个div中，如图。

对上图中son1和son3添加relative属性.son1{position: relative;top: 30px;left: 40px;} .son3{position: relative;top: 10px;left: 20px;}，因此son1和son3会根据他们原本所在的位置进行偏移，如图。

***同一个块内的元素，son1添加了relative，son1发生偏移，son1的流布局位置依然保存，且不会影响son2元素的定位，son2依然会出现在正常的流布局位置中。

2.position:absoult

absolute的相对偏移对象分两种情况：

• 父级或祖父级等也有absolute或者relative属性
• 任意层父级无absolute或者relative属性。

添加了absoult属性的元素会丢失它原本在流布局中的位置，relative属性不会。

不添加position属性的原始布局如图，其中son6和son7在一个div中，son8合son9在一个div中。

①父级有absolute属性。

对当父级有该属性，则相对偏移位置为父元素偏移后所在位置为基准进行偏移。

对son6的父div1和son6添加absolute属性，son6设置偏移，son7不设置，结果如图：

son6发生了基于父元素位置的偏移，因为添加了absoult属性的元素，son6和父div1会丢失原本在流布局中的位置，因此父div2会排列到原本父div1的位置，son7会排列到原本son6的位置，因此发生了遮挡。

②父级有relative属性。

对son6的父div1设置relative属性，son6添加absolute属性，son6设置偏移，son7不设置，结果如图：

son6发生了基于父元素位置的偏移，因为添加了absoult属性的元素，son6会丢失原本在流布局中的位置，父div1的流位置并未丢失，son7会排列到原本son6的位置。

③任意层父级无absolute或者relative属性。

当无父级无该属性，则相对偏移位置以body为基准进行偏移。

只对son6添加absolute属性，设置偏移，son6发生了以body为基准的偏移。

son6父级无该属性，因此son6以body为基准偏移。
***同一个块内的元素，son6添加了absolute，son6发生偏移，son6实现了漂浮，失去了流布局位置，看起来像不受父元素约束，此时son7会接替son6的位置出现在正常的流中。

3.position:fixed

fixed是特殊的absoult，因为他总会以body进行偏移。

参考文章：https://blog.csdn.net/qq_34858648/article/details/74726044

代码：

https://codechina.csdn.net/qq_24915489/html/-/blob/a9ea35e1df585e7abc9e4a3380bcfabdc034b220/index_relative.html

https://codechina.csdn.net/qq_24915489/html/-/blob/a9ea35e1df585e7abc9e4a3380bcfabdc034b220/index_absolute.html

https://codechina.csdn.net/qq_24915489/html/-/blob/a9ea35e1df585e7abc9e4a3380bcfabdc034b220/index_fixed.html·