前端常用布局方式总结CSS-position定位布局简记

position: absolute

• 元素会脱离文档流
• 相对于离它最近的且不是static定位的父元素定位
• 宽度由内容决定
• 定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据

position: relative

• 元素仍处于文档流中
• 定位是相对于原本自身的位置
• 若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小

position: static：

• 是position的默认值，元素处于正常的文档流中
• 会忽略left、top、right、bottom和z-index属性

position: fixed

• 是特殊版的absolute
• fixed元素总是相对于body定位的

position: inherit

• 继承父元素的position属性
• 注意：IE8以及往前的版本都不支持inherit属性

position: sticky

• 元素在跨越特定阈值前为相对定位，之后为固定定位
• 元素在屏幕范围位置并不受到定位影响（top、left等属性无效）
• 元素位置将要移出偏移范围时，定位会变成fixed，根据设置的left、top等属性成固定位置的效果。
• 相对于离它最近的具有滚动框的祖先元素定位，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。
• 注意：
  • 兼容性还不是很好
  • 父元素不能是overflow：hidden
  • 必须设置了top\left\right\bottom四个属性中的之一