position: absolute、relative

position属性用于指定元素的定位方式，其中absolute和relative是两种常见的定位方式。

相对定位（relative）是指元素相对于其初始位置进行定位，元素的位置是在正常文档流中，不会影响其他元素的布局，可以通过top、left、right、bottom属性来调整元素的位置。

绝对定位（absolute）是指元素相对于其最近的非static定位祖先元素进行定位，如果没有非static定位祖先元素，那么相对于文档的body元素进行定位。绝对定位的元素位置不在正常文档流中，不会影响其他元素的布局，可以通过top、left、right、bottom属性来调整元素的位置。绝对定位的元素可以配合z-index属性来调整自身与其他元素之间的层级关系。

总之，相对定位和绝对定位的主要区别是参照物不同，相对定位是相对于元素自身的初始位置进行定位，而绝对定位是相对于最近的非static定位祖先元素或文档的body元素进行定位。两种定位方式都可以通过top、left、right、bottom属性来进行定位调整。

相关问题

position: absolute;position: relative;的区别

position: absolute;和position: relative;是CSS中用于定位元素的两个属性。

position: absolute;是一种绝对定位的方式，它会使元素脱离正常的文档流，并相对于最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块（通常是浏览器窗口）进行定位。使用absolute定位的元素不会占据文档流中的空间，其他元素会忽略它的存在。

position: relative;是一种相对定位的方式，它会使元素相对于其正常位置进行定位。相对定位不会使元素脱离文档流，它仍然占据原来的空间，只是在原有位置上进行偏移。通过设置top、right、bottom和left属性，可以控制元素相对于其正常位置的偏移量。

总结一下区别：
- position: absolute;会使元素脱离文档流，不占据空间，相对于最近的已定位祖先元素进行定位。
- position: relative;不会使元素脱离文档流，仍然占据空间，相对于其正常位置进行定位。

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. 使用这两个定位属性时，