3.1 position: relative
CSS中的相對定位讓元素可以相對於它們在文件流中的初始位置移動。當使用position: relative時，元素在正常流中仍保有原位，但可以通過屬性top、right、bottom和left來移動它。這些屬性允許相對於其正常位置移動元素。
相對定位的基本原則
使用相對定位（position: relative）時，元素從文件流中的原始位置移動。這種移動只影響該元素本身，而其他元素保持其位置，仿佛元素未被移動。這種特性可以用來創建元素重疊的效果或額外的視覺留白。
語法：
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
其中：
top: 相對於正常位置向下移動元素right: 相對於正常位置向左移動元素bottom: 相對於正常位置向上移動元素left: 相對於正常位置向右移動元素<值>: 可以是任何CSS中允許的長度值（px、%、em等）
3.2 top 屬性
top屬性使元素相對於其初始位置向下移動。
使用top的範例：
CSS
.relative-top {
position: relative;
top: 20px; /* 向下移動元素20個像素 */
}
使用範例：
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
HTML
<div class="container">
<div class="box static-box">這是普通塊</div>
<div class="box relative-top">這個塊會向下移動20px。</div>
<div class="box static-box">這是普通塊</div>
</div>
3.3 right 屬性
right屬性使元素相對於其初始位置向左移動。
使用right的範例：
CSS
.relative-right {
position: relative;
right: 20px; /* 向左移動元素20個像素 */
}
使用範例：
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
HTML
<div class="container">
<div class="box static-box">這是普通塊</div>
<div class="box relative-right">這個塊會向左移動20px。</div>
<div class="box static-box">這是普通塊</div>
</div>
3.4 bottom 屬性
bottom屬性使元素相對於其初始位置向上移動。
使用bottom的範例：
CSS
.relative-bottom {
position: relative;
bottom: 20px; /* 向上移動元素20個像素 */
}
使用範例：
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
HTML
<div class="container">
<div class="box static-box">這是普通塊</div>
<div class="box relative-bottom">這個塊會向上移動20px。</div>
<div class="box static-box">這是普通塊</div>
</div>
3.5 left 屬性
left屬性使元素相對於其初始位置向右移動。
使用left的範例：
CSS
.relative-left {
position: relative;
left: 20px; /* 向右移動元素20個像素 */
}
使用範例：
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
HTML
<div class="container">
<div class="box static-box">這是普通塊</div>
<div class="box relative-left">這個塊會向右移動20px。</div>
<div class="box static-box">這是普通塊</div>
</div>
3.6 與相鄰元素的交互
使用position: relative的元素仍然在文件的正常流中，這意味著它們仍然佔據著它們未移動時會佔據的空間。這允許移動元素而不改變頁面上其他元素的佈局。
使用範例：
CSS
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
HTML
<div class="container">
<div class="box box1">元素 1 (向下移動)</div>
<div class="box box2">元素 2 (向右移動)</div>
<div class="box">元素 3 (正常位置)</div>
</div>
代碼說明：
-
.box1: 元素向下移動20像素，但它在正常流中的位置未變，這意味著其他元素會相對於它的原始位置排列 -
.box2: 元素向右移動20像素，但它在正常流中的位置未變
GO TO FULL VERSION