div position relative 是CSS中的一個屬性，用來控制元素的定位。position屬性有多個取值，其中之一就是relative，它表示元素相對于它自身默認位置進行定位。在使用relative定位時，元素的位置會相對于其在文檔流中的原始位置發生偏移。
下面通過幾個代碼案例來詳細解釋說明div position relative 的用法和效果。
第一個案例是創建一個相對定位的div元素，并將其向右偏移10像素。代碼如下：

<div style="position:relative; left:10px;">
這是一個相對定位的div元素。
</div>

在這個案例中，我們使用style屬性將一個div元素設為相對定位，并設置了left屬性值為10像素。這會使得該元素相對于它在文檔流中的原始位置向右偏移10像素。可以看到，該div元素在瀏覽器中呈現的位置比正常位置右移了10像素。
第二個案例是創建一個相對定位的div元素，并使用top和left屬性同時進行偏移。代碼如下：

<div style="position:relative; top:20px; left:10px;">
這是一個相對定位的div元素。
</div>

在這個案例中，我們使用style屬性同時設置了top和left屬性，分別為20像素和10像素。這會使得該元素相對于它在文檔流中的原始位置同時向下偏移20像素和向右偏移10像素。可以看到，該div元素在瀏覽器中呈現的位置相對于正常位置下移了20像素，同時右移了10像素。
第三個案例是創建一個相對定位的div元素，將其嵌套在另一個div中，并使用margin屬性進行定位。代碼如下：

<div style="position:relative;">
<div style="position:relative; margin: 20px;">
這是一個相對定位的div元素。
</div>
</div>

在這個案例中，我們在一個相對定位的div元素內部再嵌套了一個相對定位的div元素，并使用margin屬性將其向外部偏移20像素。由于內部div元素相對于外部div元素進行定位，它的位置會相對于外部div元素的位置發生偏移。可以看到，內部div元素在瀏覽器中呈現的位置比正常位置向外偏移了20像素。
通過以上案例，我們可以看到div position relative 的用法和效果。通過對元素的定位屬性設置，我們可以相對于元素在文檔流中的原始位置對其進行偏移。這種方式有助于我們精確地控制元素在網頁中的布局和位置。同時，在實際應用中，我們可以根據具體需求使用不同的定位屬性，例如absolute和fixed，來實現更為復雜的布局效果。