CSS Layout - 定位

CSS 的定位屬性用於控制元素在頁面上的位置。透過靈活運用定位屬性，可以實現多樣化的排版效果，提升頁面設計的靈活性與美觀性，讓網頁的版型不再是死板板的水平、垂直排列了。

position

此屬性的值不為 static 時，便可以使用 top、right、bottom、left 和 z-index 這些屬性。

• static: 所有元素的預設定位方式。
• relative: 元素相對於其正常位置進行偏移。
• absolute: 元素相對於最近的父層元素進行定位(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。若是要還原為預設，則不再此限。