一、相对定位
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左上角发生偏移
使用场景:像某些网站的广告窗口。