position

position

说到position，究竟了解的多少呢？

1.普通版

position的属性值分别有：

• static：静态定位，是作为默认值
• relative：相对定位，相对于元素自身进行偏移，不脱离文档流
• absolute：绝对定位，相对于position不为static的元素，如果没有则相对于浏览器进行定位，脱离文档流
• fixed:根据浏览器进行定位，脱离文档流
• sticky：粘性定位，当没有设置top/left/right/bottom时定位方式与relative相同，设置之后，当滚动的距离小于设置的时候则显示fixed的效果，大于时为relative的效果，不脱离文档流

这样就结束了吗？

2.升级版

• 当元素脱离文档流时会使父元素塌陷,
• 当position：absolute||fixe时，float会失效，为relative时position及float都会生效，为sticky时只有float生效
• position产生的层叠上下文是高于float的，几个属性值为后来居上
• 值为absolute时会使元素变为块级

position就这些了吧