css position 属性详解

position属性有 sticky，relative，absulute、fixed四种。

1.position：static

  是否脱离文档流：否

  特征：top bottom left right z-index会无效

2.position:relative

   是否脱离文档流：否

   特征：相对于原来的位置定位，其他的元素位置不会受到影响

3.position:absoluite

   是否脱离文档流：是

   特征:1.设置父元素为relative或者absolute。2.如果父元素没有设置，那么一直向上找，直到body为止。

4.position:fixed

   是否脱离文档流：是

    特征：fixed总是相对于body对位的

    特殊情况:当fixed失效时，可以给上级元素设置transform: none;或者display：inline。这样可以解决问题

5.position:inherit

   特征：继承父元素的position属性

6.position:sticky

  特征：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。