position: relative;的作用

position: relative;是CSS中的一个定位属性，它的作用是相对于元素本身原来的位置进行定位。具体的作用包括：

1. 块级元素设置position: relative;后，可以通过top、right、bottom、left等属性进行相对于原本位置的微调；

2. 在使用z-index属性时，只有position属性值为relative、absolute、fixed的元素才能设置z-index属性值，因此使用position: relative;可以使元素具有z-index属性；

3. 在设置伪元素（::before和::after）样式时，如果需要将伪元素相对于元素自身进行定位，需要给元素设置position: relative;

总的来说，position: relative;可以使元素相对于原始位置进行微调，并且在一些特殊情况下也很有用。

相关问题

position:static 和 position:relative

`position:static` 和 `position:relative` 是 CSS 中的定位属性，它们可以用来控制元素在页面中的位置。

`position:static` 是默认的属性值，它表示元素在文档流中的位置，并且不会被其他元素覆盖。如果给一个元素设置了 `position:static`，那么 `top`、`right`、`bottom`、`left` 和 `z-index` 属性将不起作用。

`position:relative` 表示元素相对于其正常位置进行定位。也就是说，如果给一个元素设置了 `position:relative`，然后设置了 `top`、`right`、`bottom`、`left` 属性，那么元素会相对于其正常位置进行移动，而不会影响其他元素的位置。如果不设置 `top`、`right`、`bottom`、`left` 属性，那么元素的位置不会发生改变。

总之，`position:relative` 可以用来微调元素的位置，而 `position:static` 表示元素的默认位置，不需要进行调整。

position: absolute;和position: relative;

`position: absolute;` 和 `position: relative;` 都是 CSS 布局中的定位属性，但它们有不同的作用。

1. **position: absolute;**: 当你为一个元素设置 `position: absolute;` 时，它会脱离标准文档流（normal flow），不再影响其他元素的位置。元素会相对于其最近的具有非 `static` 定位的祖先元素（如果有的话，如果没有则相对于视口）进行定位。绝对定位的元素可以设置 `top`, `right`, `bottom`, `left` 属性来确定其在容器中的位置，并且可以使用 `z-index` 控制层叠顺序。

2. **position: relative;**: 相对于 `static` 定位的元素，`position: relative;` 的元素不会脱离文档流，它会保持在正常位置，并根据 `top`, `right`, `bottom`, `left` 属性进行偏移，但其他元素依然会按照预期排列。相对定位主要用于提供一个基准点，以便其他绝对定位的子元素定位在其上。

相关问题：
1. 何时使用 `position: relative;` ？有何优势？
2. `position: absolute;` 通常用于哪些布局需求？
3. 使用这两个定位属性时，