css中相对定位、绝对定位和固定定位的区别

一、相对定位

position：relative
配合 top/left/bottom/right偏移属性使用

1.元素不脱离文档流（偏移后其他兄弟元素不占位）
2.相对元素原来的位置做偏移
3.如果一个元素设置了relative，但是没写偏移属性，跟没定位的效果是一样的。

使用场景：
1.类似于margin，做元素的位置的微调
2.作为绝对定位元素的父级或者祖先级已定位元素使用。

二、绝对定位

position:absolute;
配合 top/left/bottom/right偏移属性使用

1.元素脱离文档流
2.如果有定位父级相对于第一个定位父级发生偏移，没有定位父级相对于相对body左上角发生偏移；

三、固定定位

position：fixed；
配合 top/left/bottom/right偏移属性使用
1.相对于body左上角发生偏移

使用场景：像某些网站的广告窗口。