首先,position的这两个属性一般是不使用的,因为有了浮动,所以我们才需要position属性来实现我们想要的布局。
1.相对定位(relative):相对于原来位置(原来位置指在文档流中默认的位置,若加上了浮动时,那么这个原来位置就是你设定浮动时的位置)的偏移,原来位置依然占据空间。
(1)box1和box2都没有设置position属性(没有设置float属性时)
效果图:我们可以看出box盒子设置的left(包括top,right,bottom等)属性根本没起到任何作用
(2)给box2加上position:relative,效果如图:这时候box2相对于原来的位置分别向右和下偏移了100px
(3)有float属性时:
(4)效果图:
(5)给box2加上position:relative后:相对于原来的位置偏移
(6)给两个标签都加上position:relative时:两个盒子都只相对于自己原来的位置偏移
2.绝对定位(absolute):指子元素在父元素里面相对于父级元素的定位,设置绝对定位的元素,它会浮起来,不会占据文档流空间(相对定位会占据空间)。
(1)给box1添加position:relative属性,给box02添加position:absolute属性
效果如图:box02的父级元素box2没有position属性,它就继续向上一级寻找,找到box1然后以box1为参照点移动。可以看到box02定位到了右下角,box03占据了box02 原有的位置(即absolute属性会删除原来位置占据的文档流空间),
(2)给box2设置position:absolute属性时,我们看到box02的位置是以box2位参照物来移动的。
(3)同样,我们给box03也加上position:absolute属性,此时box03的参照物也是box2
以上就是我对相对定位和绝对定位的了解,若有不足之处,还请指正。
如果觉得《相对(relative)定位和绝对(absolute)定位》对你有帮助,请点赞、收藏,并留下你的观点哦!