基本用法
- 浮動到左邊：
.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>
在這個例子中，紅色的方塊位於藍色方塊的下面，因為它的 z-index 值較小。
