position: relative 是原地偏移且保留文檔流，而 position: absolute 是脫離文檔流的絕對定位。1. position: relative 元素仍占據原有空間，偏移基于自身原位置，常用于微調布局或作為 absolute 元素的定位參考；2. position: absolute 元素脫離文檔流，不保留原有空間，定位基于最近的非 Static 定位祖先元素，適合需要獨立定位的場景；3. 使用時需注意：absolute 元素必須指定 top、left 等值，且其父容器最好設置為 relative 等定位方式以控制定位范圍，同時通過 z-index 可調節堆疊層級。
在網頁布局中，position: absolute 和 position: relative 是兩個常用的定位方式，它們雖然都屬于定位屬性，但行為和使用場景差異很大。理解它們的區別，能幫助你更精準地控制元素的位置。
position: relative 是“原地偏移”
設置 position: relative 的元素，仍然保留在文檔流中原本的位置。你可以通過 top、bottom、left、right 屬性讓它相對于自己原來的位置進行偏移，但不會脫離文檔流，也不會影響其他元素的布局。
舉個例子：
立即學習“前端免費學習筆記（深入）”；
.box { position: relative; top: 20px; left: 30px; }
這個 .box 元素會從它原本的位置向下移動20px，向右移動30px，但它原來的空間依然保留，其他內容不會填補它原來的位置。
常見用途包括：
- 微調元素位置而不影響整體布局
- 作為 absolute 定位子元素的“參考點”
position: absolute 是“脫離文檔流的絕對定位”
一旦設置了 position: absolute，元素就會完全脫離文檔流，不再占據原來的空間。它的位置是相對于最近的設置了非 static 定位的祖先元素來確定的。如果沒有這樣的祖先，它就會一直向上找，直到視口或某個固定定位的祖先為止。
例如：
.parent { position: relative; } .child { position: absolute; top: 10px; left: 20px; }
在這個例子中，.child 會以 .parent 為參考點，出現在距離父元素上邊10px、左邊20px的位置。
需要注意的幾點：
- 脫離文檔流后，不影響其他元素布局
- 必須明確指定 top、left 等值才能生效
- 如果沒有定位過的祖先元素，可能會跑到頁面意想不到的位置
使用時的一些小技巧
- 想讓一個 absolute 元素在某個容器內定位？那這個容器必須設置成 relative、absolute、fixed 或 sticky。
- 多層嵌套定位時，注意層級關系，可以通過 z-index 控制堆疊順序。
- relative 更適合微調，absolute 更適合獨立定位。
基本上就這些。這兩個屬性看起來簡單，但在實際開發中很容易因為理解不到位而出錯，尤其是在復雜布局中。
以上就是css中<a
