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 相同。