CSS 定位排版 position：五種定位方式與 z-index
CSS 的定位屬性用於控制元素在頁面上的位置。透過靈活運用定位屬性，可以實現多樣化的排版效果，提升頁面設計的靈活性與美觀性，讓網頁的版型不再是死板板的水平、垂直排列了。
position
此屬性的值不為 static 時，便可以使用 top、right、bottom、left 和 z-index 這些屬性。
static: 所有元素的預設定位方式。relative: 元素相對於其正常位置進行偏移。absolute: 元素相對於最近的 已定位祖先（position不是static的祖先）進行定位。若完全沒有已定位的祖先，則以整份文件為基準，捲動時會跟著移動。fixed: 元素相對於視窗進行定位，無論頁面滾動與否，位置都保持不變。sticky: 元素在特定的滾動範圍內表現為相對定位，超出範圍後變為固定。
top
元素的上緣處，相對於定位基準的距離。
left
元素的左緣處，相對於定位基準的距離。
bottom
元素的下緣處，相對於定位基準的距離。
right
元素的右緣處，相對於定位基準的距離。
z-index
z-index 是 CSS 中用來控制元素堆疊順序的屬性。當元素重疊時，z-index 決定了哪個元素會顯示在上面。
注意事項
top、right、bottom、left和z-index這些屬性必須在position不為static才能使用。- 使用
absolute或fixed時，需注意元素可能會脫離文檔流，影響其他元素的排版。 sticky定位需要設置top、left等屬性，並且其父容器不能有overflow: hidden。- 規劃相互覆蓋網頁元素的
z-index範圍，而不是一昧地將數字設定很高。否則，以後只會道高一尺，魔高一丈! - 有設定
left，就不要設定right；同樣地，有設定top就不要設定bottom。若是要還原為預設，則不再此限。
五種定位的差別
| 值 | 行為 | 佔空間 |
|---|---|---|
static | 預設，照正常文件流排列 | 是 |
relative | 相對原本位置偏移，常當作定位基準 | 是 |
absolute | 相對最近的已定位祖先擺放 | 否 |
fixed | 相對視窗固定 | 否 |
sticky | 捲到指定位置前正常、之後黏住 | 是 |
css
.parent { position: relative; } /* 建立定位基準 */
.badge { position: absolute; top: 8px; right: 8px; }常見的踩坑
fixed的祖先若設定了transform、filter或perspective，它會改為相對那個祖先定位。sticky需要指定方向與距離，且父層不能有溢出隱藏的設定。z-index只對非static的元素有效，且比較只在 同一個堆疊環境 內進行。
常見問題
absolute 是相對於誰定位？
相對於最近一個 position 不是 static 的祖先元素；都沒有的話就以整份文件為準。因此使用前通常會先在父層加上 relative。
fixed 為什麼失效了？
祖先元素若設定了 transform、filter 或 perspective，就會成為新的定位基準，fixed 會改為相對它定位而不是視窗。這是最常見的原因。
sticky 沒有黏住怎麼辦？
確認三件事：有沒有指定方向與距離、父層是不是有溢出隱藏的設定、以及父層高度是否足以讓它滑動。三者缺一都會沒有效果。
z-index 設很大還是被蓋住？
層級的比較只在同一個堆疊環境內進行。父層若因為透明度或變形建立了新的堆疊環境，子元素再大的數值也跳不出去。
