position:relative
和position:absolute
是CSS中两个常用的定位属性,它们有以下区别:
position:relative
相对定位,元素的位置相对于其原本的位置进行偏移,不会影响其他元素的位置和布局。position:absolute
绝对定位,元素的位置相对于最近的已定位祖先元素进行偏移,如果没有已定位的祖先元素,则相对于文档的body元素进行偏移。该属性会使元素脱离文档流,会影响其他元素的位置和布局。需要注意的是,使用绝对定位的元素,其父级元素需要设置为相对定位position:relative
或绝对定位position:absolute
,否则该元素的位置偏移将相对于文档的body元素。
应用场景:
position:relative
常用于微调元素的位置,例如想要一个元素向右偏移10像素,可以设置left:10px
。position:absolute
常用于创建浮动元素,例如弹出层、下拉菜单等。