position 的 relative 和 absolute 定位原点
在 CSS 中，position 属性用于控制元素的定位方式。不同的定位类型具有不同的原点概念，尤其是 relative 和 absolute 定位。了解这两种定位的原点非常重要，以便更好地控制页面布局。
relative 定位
当一个元素的 position 设置为 relative 时，该元素相对于其在文档流中的原始位置进行定位。换句话说，relative 定位的原点是元素在正常文档流中的位置。这使得元素可以通过 top、right、bottom 和 left 属性相对于其原本位置进行偏移。
示例：
<div class="relative-box">
我是一个相对定位的盒子
</div>
<style>
.relative-box {
position: relative; /* 设置为相对定位 */
top: 20px; /* 从原位置向下移动20px */
left: 10px; /* 从原位置向右移动10px */
background-color: lightblue;
padding: 10px;
}
</style>
在上面的例子中，.relative-box 元素会从其原始位置向下移动 20 像素，向右移动 10 像素，但仍然会占据原本在文档流中的空间。
absolute 定位
与 relative 定位不同，absolute 定位的原点是最近的已定位祖先元素（即 position 属性值为 relative、absolute 或 fixed 的元素）。如果没有已定位的祖先元素，则原点将是文档的根元素（通常是 <html> 标签）。
示例：
<div class="relative-parent">
<div class="absolute-box">
我是一个绝对定位的盒子
</div>
</div>
<style>
.relative-parent {
position: relative; /* 设置为相对定位，成为绝对定位的参考点 */
height: 200px;
background-color: lightgreen;
}
.absolute-box {
position: absolute; /* 设置为绝对定位 */
top: 10px; /* 相对于最近的已定位祖先元素移动10px */
left: 20px; /* 相对于最近的已定位祖先元素移动20px */
background-color: coral;
padding: 10px;
}
</style>
在这个例子中，.absolute-box 元素是绝对定位的，它的原点是 .relative-parent 元素，因为 .relative-parent 是它最近的已定位祖先。这样，.absolute-box 将相对于 .relative-parent 元素的边界移动。
小结
- relative 定位 的原点是元素在文档流中的原始位置，允许元素相对于这个位置进行偏移，但仍然占据其原始空间。
- absolute 定位 的原点是最近的已定位祖先元素。如果没有这样的祖先，则原点为文档根元素。绝对定位的元素在文档流中不占空间。
理解这两种定位的原点有助于更好地控制元素的布局和定位，尤其是在复杂的用户界面设计中。
