文章

定位（Positioning）

發布於 更新於
作者 Ned Hsu 9 分鐘閱讀

定位（Positioning）

CSS 定位（Positioning）是用來控制 HTML 元素在頁面中的位置的方式。通過使用不同的定位方法，可以實現更加靈活、精確的元素佈局，從而創建各種複雜的網頁設計效果。CSS 提供了多種定位屬性，包括：static、relative、absolute、fixed 和 sticky。

1. 定位屬性概述

CSS 的 position 屬性用於設置元素的定位方式。以下是各種定位方式的簡單介紹：

  • static（靜態定位）：默認定位方式，元素按正常的文檔流排列，不會受到 top、right、bottom、left 屬性的影響。

  • relative（相對定位）：相對於元素在正常文檔流中的位置進行定位，可以使用 top、right、bottom、left 屬性來調整位置，但元素依然保留原本的位置，不會影響其他元素的佈局。

  • absolute（絕對定位）：相對於最近的已定位（非 static）祖先元素進行定位，元素脫離文檔流，不再佔用空間，可以精確控制元素的位置。

  • fixed（固定定位）：相對於瀏覽器窗口（視口）進行定位，無論滾動條的滾動，元素始終保持在相對於視口的固定位置。

  • sticky（粘性定位）：結合 relative 和 fixed 的特性，相對於最近的已定位祖先進行定位，但在滾動到一定位置後，會變成固定定位。

2. 各種定位方式的詳細解釋

2.1 靜態定位（static）

靜態定位是所有元素的默認定位方式。使用 static 定位時，元素根據正常的文檔流排列，不會被其他定位屬性（如 top、right、bottom、left）影響。

範例：

1
2
3

.element {
    position: static; /* 默認定位，無需明確設置 */
}

2.2 相對定位（relative）

相對定位使元素相對於其正常位置進行偏移。元素仍然佔據其原始空間，但可以使用 top、right、bottom、left 屬性進行調整。相對定位主要用於稍微移動元素，而不改變文檔流中的結構。

範例：

1
2
3
4
5

.relative-element {
    position: relative;
    top: 20px; /* 向下移動 20px */
    left: 10px; /* 向右移動 10px */
}

效果：

  • 元素相對於其原始位置向下移動 20 像素，向右移動 10 像素。
  • 其他元素仍然認為該元素位於原來的位置，因此不會改變其他元素的佈局。

2.3 絕對定位（absolute）

絕對定位使元素脫離正常文檔流，並相對於最近的已定位祖先（非 static 定位）進行定位。如果沒有找到這樣的祖先，則相對於視口（整個瀏覽器窗口）進行定位。可以使用 top、right、bottom、left 屬性精確控制元素的位置。

範例：

1
2
3
4
5
6
7
8
9

.container {
    position: relative; /* 父元素設為相對定位 */
}

.absolute-element {
    position: absolute;
    top: 0;
    right: 0;
}

效果：

  • .absolute-element 將脫離文檔流，並相對於最近的已定位祖先 .container 的右上角進行定位。
  • 其他元素將忽略它的存在，佔據其原來的位置。

2.4 固定定位（fixed）

固定定位使元素相對於視口（瀏覽器窗口）進行定位。無論頁面如何滾動，固定定位的元素始終保持在相對於視口的固定位置。

範例：

1
2
3
4
5
6
7
8
9

.fixed-element {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
}

效果：

  • .fixed-element 將始終固定在視口的頂部，作為一個固定的頂部導航欄或頭部。
  • 即使用戶滾動頁面，該元素的位置也不會改變。

2.5 粘性定位（sticky）

粘性定位結合了相對定位和固定定位的特點。當元素位於視口指定位置時，會改為固定定位，否則保持相對定位。常用於實現「粘性」導航欄或標題。

範例：

1
2
3
4
5
6

.sticky-element {
    position: sticky;
    top: 10px; /* 當元素距視口頂部達到 10px 時固定 */
    background-color: #f8f9fa;
    padding: 5px;
}

效果：

  • .sticky-element 將保持相對定位，直到滾動到距視口頂部 10px 的位置。
  • 一旦達到此位置，該元素將變為固定定位，並保持在距視口頂部 10px 的位置。

3. 定位屬性 z-index

z-index 用於控制定位元素的堆疊順序，定義了元素在 Z 軸上的相對順序。z-index 屬性只有在元素的 position 屬性不是 static 時才有效。數值越大，元素越靠上（顯示在前面）；數值越小，元素越靠下（顯示在後面）。

範例：

1
2
3
4
5
6
7
8
9
10
11
12
13

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 10; /* 顯示在前面 */
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 5; /* 顯示在後面 */
}

4. 定位的應用實例

4.1 固定導航欄

創建一個固定在頂部的導航欄，無論頁面滾動到何處，導航欄始終可見。

1
2
3
4
5
6
7
8
9
10

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    z-index: 1000; /* 保證導航欄顯示在其他元素之上 */
}

4.2 絕對定位的彈出層

創建一個相對於父元素位置的彈出層。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #ddd;
}

.popup {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

4.3 粘性表頭

創建一個粘性表頭，當滾動到一定位置時，表頭將固定在視口頂部。

1
2
3
4
5
6

.table-header {
    position: sticky;
    top: 0; /* 當滾動到距視口頂部 0px 時固定 */
    background-color: #fff;
    border-bottom: 2px solid #ddd;
}

5. 小結

CSS 提供了多種定位方法，用於靈活控制元素在頁面中的位置。static 是默認的文檔流定位，不常需要更改；relative 用於相對於元素的原始位置進行微調；absolute 使元素脫離文檔流並相對於已定位的祖先元素定位；fixed 使元素固定於視口位置；sticky 用於元素在滾動到特定位置後的固定效果。通過正確使用這些定位方式，可以實現各種複雜的網頁佈局和交互效果。

Software, CSS
CSS
本文章以 CC BY 4.0 授權