position: relative;position: absolute;是什么意思

`position: relative;` 和 `position: absolute;` 都是CSS用于定位元素的属性，但它们的工作方式有所不同。

1. **position: relative;**
- 当元素拥有相对定位(`position: relative;`)时，它保持在正常文档流的位置，并允许其子元素相对于它进行偏移。这意味着该元素会占据原来的空间，其后面的兄弟元素不受影响。
- 可以使用`top`, `right`, `bottom`, `left`等属性设定偏移量，或者使用`margin`和`padding`进行调整。例如：

     .relative-element {
       position: relative;
       top: 20px;
     }

- 子元素可以使用`position: absolute;`或`position: fixed;`与之配合实现动态定位。

2. **position: absolute;**
- 绝对定位(`position: absolute;`)使得元素脱离正常的文档流，完全基于祖先元素的定位进行定位。如果没有祖先元素设置了定位，那么会基于最近的已定位祖先元素。
- 元素不再占用原来的文档空间，而是相对于最近的已定位祖先元素或视口定位。可以使用`top`, `right`, `bottom`, `left`设置距离，也可以用百分比值。

     .absolute-element {
       position: absolute;
       left: 50%;
       transform: translateX(-50%); // 将元素居中
     }