CSS 排版詞條 3-22

定位Position

也常叫做：定位、位置、Position

你可能會這樣說

想做回到頂端的浮動按鈕、卡片右上角的關閉叉叉，或捲動時黏在頂端的標題列，不知道怎麼讓元素「脫隊」。

position 決定元素要乖乖排在流程裡，還是脫隊飛去指定位置。最常用三種：fixed 釘在螢幕上（浮動按鈕）、sticky 黏在某處（捲到才黏住的表頭）、absolute 疊在別人身上（卡片角落的叉叉）。

absolute 有個前提：它會找最近的「有定位的上層」當基準，沒講清楚就會飛到整頁的角落去，這是新手版面炸掉的常見原因。

跟 AI 描述時直接講情境：「浮動按鈕釘右下」「標題列黏頂」，它就會選對模式。

容器（relative）

浮動元素（absolute）

距離頂端距離左側

這是相對容器定位；fixed 釘在螢幕上、sticky 黏在頂端——它們要配合捲動情境才看得出效果。

圖 3-22　改上距與左距，元素在容器裡自由飛行——角落的叉叉就是這樣疊上去的。

中文就可以

幫我加三個定位效果：
右下角釘一顆「回到頂端」圓按鈕，距離邊緣 24px，捲動超過一個螢幕才淡入。
表格的表頭設成捲動時黏在頁首下方。
每張卡片的右上角疊一個關閉圖示，以卡片為基準，不能跑出卡片外。
手機上全部注意不要蓋到重要按鈕。