CSS Position 定位詳解：relative 與 absolute 的參照對象區別

CSS position 屬性中的 relative（相對定位）和 absolute（絕對定位）是佈局的核心，但初學者常混淆它們的參照對象。本文用通俗語言徹底講清兩者的定位基準。

核心結論

relative：以自身為參照

元素「原本在哪裡」，加上 top/left/bottom/right 後就「相對原位置偏移」。原位置保留，周圍元素不受影響。

.box {
  position: relative;
  top: 20px;   /* 向下偏移 20px */
  left: 30px;  /* 向右偏移 30px */
}

absolute：以最近的「已定位」祖先為參照

• 向上查找父級，直到找到 position: relative | absolute | fixed | sticky 的祖先。
• 若找不到，則以 <html> (initial containing block) 為參照。
• 元素完全脫離文檔流，不佔據空間，周圍元素會填補其原位置。

.parent { position: relative; }  /* 成為定位基準 */
.child  { position: absolute; top: 0; right: 0; }  /* 相對 parent 定位 */

常見誤區

1. 以為 absolute 總是相對父元素 —— 父元素必須有非 static 定位。
2. 以為 relative 不佔位 —— 它仍佔據原有空間。
3. 混淆 z-index 生效條件 —— 只有定位元素（非 static）才能使用 z-index。

實戰技巧

• 「父相對，子絕對」：父級加 relative，子級加 absolute 實現精確定位。
• 居中絕對定位元素：top:50%; left:50%; transform:translate(-50%,-50%)。
• 配合 overflow:hidden 實現裁剪/遮罩效果。

理解兩者的參照對象差異，是掌握 CSS 佈局的關鍵一步。