在前端開發中，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>
在這個例子中，子元素設定了 position: absolute;，它的定位原點是父元素，因為父元素設定了 position: relative;。子元素會距離父元素的左上角 20px。
如果去掉父元素的 position: relative;，那麼子元素的定位原點就會變成 <html> 元素，也就是瀏覽器視窗的左上角。
總而言之，理解 position: relative 和 position: absolute 的關鍵在於理解它們的定位原點是如何確定的。relative 相對於自身原本位置，absolute 相對於最近的已定位祖先元素。