static、relative、absolute、fixed四种定位的区别

1.静态定位

静态定位（position：static）是HTML中的默认定位，符合常规文档流，这里没太多内容。

2.相对定位

相对定位（position：relative），对象相对于本身位置而言，进行上下左右的偏移，但注意，它不脱离文档流！

如上图所示，红色div设置了相对定位，上左偏移位置（top：20px；left：20px；），但蓝色div仍然按照常规文档流保持原位置，说明红色div虽然位置偏移，但相对于本身的原位置仍然占领着。

3.绝对定位

绝对定位（position：absolute），相对于父级而言进行位置偏移，如果没有父级或者父级没有进行定位，则继续往上一级寻找参照物，直至最终的浏览