CSS相對定位是一種常見的定位方式，在網頁設計中有很多實際的應用。相對定位可以讓元素相對于它原來的位置進行微小的移動，而不改變頁面布局的整體結構。

下面通過一個實例來演示CSS相對定位的效果：

<div class="container">
<p>這是一段文字</p>
<div class="box">
<p>這是一個盒子</p>
</div>
</div>
.container {
position: relative;
}
.box {
position: relative;
left: 20px;
top: 10px;
background-color: #ccc;
}

以上代碼首先創建了一個位置屬性為相對定位的容器，然后在容器內部創建了一個位置屬性同樣為相對定位的盒子。

接下來的.left和.top兩個屬性分別表示盒子相對于它原來的位置向左移動20像素、向上移動10像素。這就是相對定位的效果。

如果沒有相對定位的屬性，這個盒子將默認出現在容器的左上角，也就是在原來的位置上。

CSS相對定位有助于實現一些頁面元素在移動時不影響整體布局的效果。通過設置left和top屬性，可以在保持整體頁面布局的前提下，對某些元素進行微調，讓它們更符合設計需求。