第 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;
}
登入後複製
在此版面：
- .sidebar はページの左側に固定され、スクロールしても表示されたままになります。
- .content 領域は相対的に配置され、サイドバーを考慮してマージンが調整されます。
練習演習
- 固定ヘッダーとフッターを使用して Web ページを作成し、コンテンツの相対位置と絶対位置を使用します。
- スクロール時に固定される固定サイドバーを追加します。
次のステップ: 次の講義では、CSS 変換とアニメーション について詳しく説明し、Web 要素を簡単にアニメーション化する方法を学びます。デザインをダイナミックかつインタラクティブにする準備をしましょう!
LinkedIn でフォローしてください
リドイ・ハサン
以上是CSS 定位 – 絕對、相對、固定和黏性。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
