CSS中的position属性可以设置元素的定位类型,比如fixed,relative,absolute等等,但是很多人搞不懂relative相对定位和absolute绝对定位的区别,这篇文章就和大家讲讲什么是绝对定位,什么是相对定位,以及相对定位和绝对定位的区别,有一定的参考价值,感兴趣的朋友可以参考一下。
一、相对定位
相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位。它相对的是它自己。
举例:大div里面包含5个小P,给P不同的类名,分别设置绝对定位和相对定位,看看他们有什么变化
没有设置定位的代码如下:
效果如图所示:
现在给第一个p标签设置相对定位,让他相对于自己原来的位置上偏移50px,左边偏移50px,具体代码如下:
.p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;}
效果图: