在 CSS 中，position 屬性是用來控制元素在頁面中的定位方式。
掌握好 position 可以讓你更靈活地控制元素的位置，實現各種頁面布局和效果。
本篇文章將介紹 CSS 中的 position 屬性，並說明不同的值（static、relative、absolute、fixed 和 sticky）的作用，讓你可以清楚如何使用它們來調整頁面元素的位置。
什麼是 CSS Position 屬性？
position 屬性用來控制元素在頁面中的位置，並決定它的定位方式。
不同的 position 值會影響元素在網頁上的排列方式、是否參考其他元素來定位等。
以下將逐一介紹各種定位方式。
CSS Position 屬性的五種定位方式
static（靜態定位）
這是 position 的預設值，所有元素在未設定 position 屬性時都會默認使用 static。
靜態定位的元素會根據 HTML 中的順序排列，無法被 top、right、bottom 或 left 等屬性調整位置。
用法範例：
<div class="box">這是一個靜態定位的元素</div>.box {
position: static;
/* 無法使用 top, left 等屬性來控制位置 */
}靜態定位通常適合用於保持頁面中的自然排列，當我們不需要特別調整元素的位置時，static 是最合適的選擇。
relative（相對定位）
相對定位的元素是相對於它 原本的位置 進行偏移。
當設定 position: relative; 後，可以使用 top、right、bottom 和 left 屬性來調整它在頁面中的位置，但它原本所佔的空間不會改變，原位置依然會被保留。
用法範例：
<div class="relative-box">這是一個相對定位的元素</div>.relative-box {
position: relative;
top: 20px; /* 向下移動 20px */
left: 10px; /* 向右移動 10px */
}說明
即使元素移動了，瀏覽器仍然會保留其原位置的空間。
相對定位常用來微調元素的位置，並且能與 absolute 定位的子元素結合，創建更精確的定位。
absolute（絕對定位）
當元素設定 position: absolute; 時，會相對於 最近的「已定位」父元素（即具有 position 設定的父元素）進行定位。
如果沒有已定位的父元素，則會相對於整個瀏覽器視窗。
用法範例：
<div class="container">
<div class="absolute-box">這是一個絕對定位的元素</div>
</div>.container {
position: relative; /* 讓子元素以它為參考 */
}
.absolute-box {
position: absolute;
top: 0; /* 相對父容器的頂部 */
left: 0; /* 相對父容器的左邊 */
}說明
absolute 定位的元素會脫離正常的文檔流，不會占據空間。
這意味著它會「浮動」在其他元素上方，因此適合用來創建彈出視窗或浮動的標籤等效果。
延伸閱讀：CSS float 屬性入門指南
fixed（固定定位）
fixed 定位讓元素相對於 視窗 進行固定，無論頁面如何滾動，它的位置都會保持不變。
這種定位方式常用於導航欄、返回頂部按鈕等。
用法範例：
<div class="fixed-box">這是一個固定定位的元素</div>.fixed-box {
position: fixed;
top: 10px;
right: 10px;
}說明
使用 fixed 定位的元素會固定在視窗中的特定位置，即使頁面向下滾動，它的位置依然不會變動。
這樣的定位方式適合用於頁面的固定導航或浮動廣告等。
sticky（黏性定位）
sticky 定位是一種 相對定位與固定定位的混合。
當元素滾動到特定位置時會「黏」在視窗上，並保持該位置不變，直到滾動範圍超出設置的範圍後再恢復正常文檔流。
要使 sticky 定位生效，必須設定 top、right、bottom 或 left 屬性。
用法範例：
<div class="sticky-box">這是一個黏性定位的元素</div>.sticky-box {
position: sticky;
top: 0; /* 當滾動到頂部時黏附在該位置 */
}說明
sticky 定位可以讓元素在頁面滾動到特定位置時停駐，常見的應用包括標題欄和目錄等。
當元素接近視窗頂部（設定的 top 位置）時會固定住，提供更好的閱讀體驗。
常見的應用場景
- 相對定位（relative）：用於小幅調整元素位置或作為
absolute定位的參考點。 - 絕對定位（absolute）：適合用來創建彈出視窗、標籤或浮動元素。
- 固定定位（fixed）：用於固定導航欄、回頂按鈕等，讓元素在頁面滾動時保持在固定位置。
- 黏性定位（sticky）：適合用於長頁面的目錄或標題，滾動到特定位置時讓元素停駐，便於使用者操作。
元素 relative + 子元素 absolute 的搭配應用
在開發中，通常會將父元素設置為 relative 定位，子元素設置為 absolute 定位。
這樣可以讓子元素相對於父元素進行精確定位，形成更加靈活的布局方式。
用法範例
HTML
<div class="container">
<div class="tooltip">這是一個浮動的提示框</div>
</div>CSS
.container {
position: relative; /* 父元素設為 relative */
width: 200px;
height: 100px;
background-color: lightgrey;
}
.tooltip {
position: absolute; /* 子元素設為 absolute */
top: 0;
right: 0;
background-color: #333;
color: white;
padding: 5px;
border-radius: 3px;
}說明
在這個範例中，container 元素被設為 relative，而 tooltip 設為 absolute。
這樣一來，tooltip 就會參考 container 的位置，出現在 container 的右上角，而不是整個視窗的右上角。
這樣的設置適合應用於彈出框、標籤和提示訊息，讓子元素能精確定位於特定父元素內，避免定位錯誤。
示例：固定導航欄的設計
以下範例展示了如何使用 fixed 定位來設置一個固定在頁面頂部的導航欄。
HTML
<header class="navbar">固定導航欄</header>
<main>
<p>這是一段內容...</p>
<p>更多內容...</p>
</main>CSS
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: white;
text-align: center;
line-height: 50px;
z-index: 1000; /* 確保導航欄位於最上層 */
}
main {
margin-top: 60px; /* 為主內容區域留出導航欄的高度 */
}說明
position: fixed;：讓導航欄固定在頁面頂部，無論頁面怎麼滾動都保持在視窗內。z-index: 1000;：確保導航欄位於最上層，不被其他元素遮擋。margin-top：主內容區域設置上方外邊距，避免被導航欄遮住。
這樣的導航欄即使滾動頁面，位置依然固定，有助於使用者隨時返回導航。
總結
CSS 中的 position 屬性讓我們可以靈活地控制元素在頁面中的位置。每種定位方式有其特點和適用場景：
static：預設的定位方式，元素按順序排列，無法使用定位屬性。relative：相對於自身位置進行偏移，適合微調位置。absolute：絕對定位，相對於已定位的父元素或視窗進行定位，適合創建浮動元素。fixed：固定定位，相對於視窗進行定位，適合導航欄和浮動按鈕。sticky：黏性定位，滾動到特定位置時「黏附」在視窗上，適合標題和目錄。
理解並靈活運用這些定位方式，並掌握「父 relative + 子 absolute」的布局方式，能夠幫助你設計出更精美且實用的頁面布局。
希望這篇文章能幫助新手理解和掌握 CSS position 屬性，為頁面設計打下良好的基礎！