文章目录
-
- 1.静态定位
- 2.相对定位
- 3.绝对定位
- 4.固定定位
1.静态定位
静态定位（position：static）是HTML中的默认定位，符合常规文档流，这里没太多内容。
2.相对定位
相对定位（position：relative），对象相对于本身位置而言，进行上下左右的偏移，但注意，它不脱离文档流！
如上图所示，红色div设置了相对定位，上左偏移位置（top：20px；left：20px；），但蓝色div仍然按照常规文档流保持原位置，说明红色div虽然位置偏移，但相对于本身的原位置仍然占领着。
3.绝对定位
绝对定位（position：absolute），相对于父级而言进行位置偏移，如果没有父级或者父级没有进行定位，则继续往上一级寻找参照物，直至最终的浏览器窗口。请注意，区别于相对定位的还有一点，绝对定位脱离常规文档流！