<div> 相對定位是一種常用的 CSS 屬性，它允許我們將一個元素相對于其初始位置進行微調。當我們需要在網頁上移動、縮放或調整元素的位置時，相對定位是非常有用的。
相對定位使用position: relative;屬性來定義。這個屬性告訴瀏覽器，元素的位置相對于其正常位置進行調整。相對定位的元素仍然占據原來的空間，其他元素不會被覆蓋或重新布局。
下面是一些代碼案例，用來詳細解釋和說明相對定位的使用。

案例 1：

<style>
.relativeDiv {
position: relative;
left: 50px;
top: 20px;
background-color: yellow;
}
</style>
<div class="relativeDiv">
This is a div with relative positioning.
</div>

在這個案例中，我們創建了一個類名為relativeDiv的 div 元素，并使用相對定位將其左移了 50 像素，上移了 20 像素。結果是這個 div 元素以其正常位置為基準移動了。我們還為這個 div 添加了一個黃色的背景色，以便更好地展示其相對移動的效果。

案例 2：

<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightblue;
}
.innerDiv {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<div class="container">
This is a container div.
<div class="innerDiv">
This is an inner div.
</div>
</div>

在這個案例中，我們創建了一個包含兩個 div 元素的容器。容器使用相對定位，并設置了寬度、高度和背景色。內部的 div 元素同樣使用相對定位，并調整其正常位置。這樣一來，內部的 div 元素會以容器 div 元素的左上角為基準進行定位，相對移動了 50 像素向下和向右。
這些案例示范了如何使用相對定位來微調元素的位置。通過改變元素的left和top屬性，我們可以在網頁上自由移動元素。相對定位對于創建動畫效果、調整布局、處理浮動元素等方面非常有用。
<div> 相對定位是 CSS 中非常實用的一種屬性，它可以幫助我們精確控制元素的位置。通過相對定位，我們可以在不改變其他元素布局的情況下，微調元素的位置。相對定位使用position: relative;來定義，并通過調整left和top屬性來實現相對移動。無論是在移動元素、創建動畫效果還是處理復雜布局中，相對定位都是非常有用的。