CSS Position：absolute 與 fixed 的共同點與不同點

position: absolute 和 position: fixed 都是脫離文檔流的定位方式，但參照基準不同，導致行為差異巨大。本文對比兩者的異同，幫助快速選型。

共同點

• 均脫離標準文檔流，不佔據佈局空間。
• 均可通過 top/right/bottom/left 精確控制位置。
• 均可設置 z-index 控制層疊順序。

核心不同點

白話總結

absolute：像貼在某個容器裡的標籤，容器動它也動。
fixed：像貼在螢幕玻璃上的便利貼，頁面怎麼滾它都不動。

典型應用場景

• absolute：下拉選單、Tooltip、模態框內部圖標、圖片熱區標註。
• fixed：頂部導航欄、側邊客服按鈕、返回頂部按鈕、全屏彈窗遮罩。

避坑提示

1. fixed 元素若在 transform/filter/perspective 非 none 的祖先內，參照基準會變為該祖先而非 viewport。
2. iOS Safari 早期版本 fixed 元素在鍵盤彈出時定位錯誤，需配合 position: sticky 或 JS 修正。
3. 打印樣式中 fixed 元素可能在每頁重複出現，建議 @media print { .fixed { position: static; } }。

根據「是否需要隨頁面滾動」選擇 absolute 或 fixed，是佈局決策的第一直覺。