position的relative和absolute定位原点是哪里？

在前端开发中，position: relative 和 position: absolute 的定位原点是不同的：

position: relative;: 相对定位。元素会相对于它原本在文档流中的位置进行偏移。设置 top、left、bottom 和 right 属性会改变元素的位置，但不会影响其他元素的布局。原本它占据的空间仍然保留。
position: absolute;: 绝对定位。元素会相对于最近的已定位祖先元素进行偏移。这意味着如果它的父元素（或更上层的祖先元素）设置了 position: relative、position: absolute 或 position: fixed，那么它就会相对于这个祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块(initial containing block)定位，通常是<html>元素。

更详细的解释：

已定位祖先元素: 指的是 position 属性值不是 static 的祖先元素。static 是默认值，表示元素在文档的正常流中。
偏移量: top、left、bottom 和 right 属性指定了元素相对于其定位原点的偏移量。
重叠: 绝对定位的元素会脱离文档流，可能会与其他元素重叠。可以使用 z-index 属性来控制元素的堆叠顺序。

示例：

<div style="position: relative; width: 200px; height: 200px; background-color: lightblue;">
  相对定位的父元素
  <div style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background-color: lightcoral;">
    绝对定位的子元素
  </div>
</div>