CSS 定位 – 絕對、相對、固定和黏性。-css教學-PHP中文網

CSS 定位 – 絕對、相對、固定和黏性。

PHPz

發布： 2024-09-10 18:00:32

原創

1114 人瀏覽過

CSS Positioning – Absolute, Relative, Fixed, and Sticky.

第 11 講：CSS 定位 – 絕對、相對、固定與黏性

歡迎來到《從基礎到輝煌》課程第十一講。在本次講座中，我們將探討CSS定位的不同類型：相對、絕對、固定和黏性。了解定位可以讓您控制元素在頁面上的顯示位置以及使用者與內容互動時元素的行為。

1.了解位置屬性

position 屬性指定元素在文件中的位置。它可以採用以下值：

靜態：預設值。元素根據正常文件流定位。
相對：元素相對於其正常位置定位。
絕對：元素相對於其最近的定位祖先或初始包含區塊進行定位。
固定：元素相對於瀏覽器視窗定位，並在捲動時保持在相同位置。
黏性：元素被視為相對元素，直到達到閾值（例如滾動位置），然後它變得固定。

2.相對定位

具有position:relative的元素相對於其原始（靜態）位置定位。它保留在文件流程中，這意味著其他元素仍會考慮它。

範例：使用相對定位來移動元素。

  .box {
    position: relative;
    top: 20px; /* Moves the box 20px down from its normal position */
    left: 30px; /* Moves the box 30px to the right */
  }

登入後複製

在此範例中，元素從原始位置向下移動 20px，向右移動 30px，但保留其在文件流程中的空間。

3.絕對定位

位置為絕對的元素將從文件流中刪除，並相對於其最近的定位祖先（即位置不是靜態的祖先）進行定位。

範例：將元素絕對定位在容器內。

  .container {
    position: relative; /* This container is the reference for the absolute positioning */
    width: 300px;
    height: 200px;
    background-color: #f4f4f4;
  }

  .box {
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px;
  }

登入後複製

在此範例中：

.box 絕對位於距離頂部 50 像素、距離右側 20 像素 .container 元素內部。
.container 具有position:relative，使其成為.box 的定位參考。

4.固定定位

位置為固定的元素相對於瀏覽器視窗定位，無論頁面如何捲動。

範例：建立固定導覽列。

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
  }

登入後複製

在此範例中：

.navbar 位於視窗頂部，即使頁面滾動也保持固定。

5.黏性定位

具有position: Sticky 的元素被視為相對元素，直到使用者捲動超過定義的閾值，此時它變得固定。

範例：滾動後保留在頂部的黏性標題。

  .header {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
  }

登入後複製

在此範例中：

.header 的行為就像普通元素一樣，直到它到達頁面頂部。之後，它會粘在頂部並在用戶滾動時保持可見。

6. Z-索引

當元素被定位（相對、絕對、固定或黏性）時，您可以使用 z-index 屬性來控制它們的堆疊順序。較高的 z-index 值使元素出現在較低的元素之上。

範例：控制堆疊順序。

  .box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1; /* Lower z-index */
    background-color: #f4f4f4;
    padding: 20px;
  }

  .box2 {
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 2; /* Higher z-index */
    background-color: #333;
    color: white;
    padding: 20px;
  }

登入後複製

在此範例中：

由於 z-index 值較高，.box2 將出現在 .box1 上方。

7.結合定位技術

您可以組合定位值來建立進階佈局。

範例：修正了具有相對內容區域的側邊欄。

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #333;
    color: white;
    padding: 20px;
  }

  .content {
    position: relative;
    margin-left: 220px; /* Account for the fixed sidebar */
    padding: 20px;
  }

登入後複製

在此版面：