CSS入門-Day6：佈局（一）

更新於 2024/08/07發佈於 2024/08/07閱讀時間約 10 分鐘

基本用法

浮動到左邊：
```
.float-left {
  float: left;
}
```
浮動到右邊：
```
.float-right {
  float: right;
}
```
清除浮動：當父元素內的所有子元素都浮動時，父元素的高度會塌陷，可以使用 clear 屬性來清除浮動。
```
.clear {
  clear: both;
}
```

示例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮動佈局示例</title>
  <style>
    .container {
      border: 1px solid #ccc;
    }
    .box {
      width: 100px;
      height: 100px;
      margin: 10px;
    }
    .float-left {
      float: left;
      background-color: lightblue;
    }
    .float-right {
      float: right;
      background-color: lightgreen;
    }
    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box float-left">左浮動</div>
    <div class="box float-right">右浮動</div>
    <div class="clear"></div>
  </div>
</body>
</html>

定位

CSS 定位允許我們精確控制元素的位置，有五種主要的定位方式：靜態定位（default）、相對定位、絕對定位、固定定位和粘性定位。

靜態定位（Static Positioning）

這是默認的定位方式，元素按照正常的文檔流進行佈局。

.static {
  position: static;
}

相對定位（Relative Positioning）

元素相對於其正常位置進行定位。

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

絕對定位（Absolute Positioning）

元素相對於最近的已定位祖先元素進行定位。如果沒有已定位的祖先，則相對於初始包含塊（通常是<body>）。

.absolute {
  position: absolute;
  top: 10px;
  left: 20px;
}

固定定位（Fixed Positioning）

元素相對於瀏覽器窗口進行定位，當頁面滾動時，元素保持在固定位置。

.fixed {
  position: fixed;
  bottom: 10px;
  right: 20px;
}

粘性定位（Sticky Positioning）

元素在超出指定的偏移量之前是相對定位的，之後變為固定定位。

.sticky {
  position: sticky;
  top: 0;
}

示例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位示例</title>
  <style>
    .container {
      height: 300px;
      border: 1px solid #ccc;
      position: relative;
    }
    .static {
      position: static;
      background-color: lightblue;
    }
    .relative {
      position: relative;
      top: 10px;
      left: 20px;
      background-color: lightgreen;
    }
    .absolute {
      position: absolute;
      top: 10px;
      left: 20px;
      background-color: lightcoral;
    }
    .fixed {
      position: fixed;
      bottom: 10px;
      right: 20px;
      background-color: lightpink;
    }
    .sticky {
      position: sticky;
      top: 0;
      background-color: lightyellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="static">靜態定位</div>
    <div class="relative">相對定位</div>
    <div class="absolute">絕對定位</div>
    <div class="sticky">粘性定位</div>
  </div>
  <div class="fixed">固定定位</div>
</body>
</html>

z-index

z-index 屬性用於控制定位元素的堆疊順序，數值越大，元素越在上層。只適用於已定位的元素（即 position 為 relative、absolute、fixed 或 sticky）。

使用範例

.layer1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1;
}

.layer2 {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 2;
}

示例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>z-index 示例</title>
  <style>
    .container {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: lightgray;
    }
    .layer1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
      z-index: 1;
    }
    .layer2 {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      background-color: blue;
      z-index: 2;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="layer1">Layer 1</div>
    <div class="layer2">Layer 2</div>
  </div>
</body>
</html>