position relative 跟absolute区别

在CSS中，position属性用于定义元素的定位方式。其中，position:relative和position:absolute是两种常见的定位方式，它们的区别如下：

1. 相对于谁定位不同：

- position:relative：相对于元素原本所在的位置进行定位。
- position:absolute：相对于最近的已定位的祖先元素进行定位。如果不存在已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。

2. 是否脱离文档流：

- position:relative：不会脱离文档流，元素仍占据原本所在位置。
- position:absolute：会脱离文档流，元素不再占据原本所在位置，其他元素会填补该位置。

3. 是否可以通过top、bottom、left、right属性进行定位：

- position:relative：可以通过top、bottom、left、right属性进行定位，但定位是相对于元素原本所在位置的偏移量。
- position:absolute：必须通过top、bottom、left、right属性进行定位，而且定位是相对于最近的已定位的祖先元素的偏移量。

总之，position:relative是相对定位，元素不会脱离文档流，而position:absolute是绝对定位，元素会脱离文档流。两者的定位方式和定位对象也有所不同。