在網頁設計領域中，給圖片做相對定位是一種常見的技術。通過使用CSS相對定位，可以使圖片在網頁中完成靈活、美觀的布局，為用戶呈現出更好的視覺效果。

下面是一個使用css相對定位對圖片進行布局的實例：

<div>
<img src="example.png" alt="示例圖片">
<p class="caption">這是一張示例圖片</p>
</div>
/* CSS代碼 */
div {
position: relative; /* 使div相對定位 */
}
.caption {
position: absolute; /* 使p相對于div進行定位 */
bottom: 0; /* 在div底部與圖片相鄰 */
left: 0; /* 在div左側與圖片相鄰 */
width: 100%; /* p寬度與div相同 */
background-color: rgba(0,0,0,0.5); /* 設置p背景顏色為半透明黑色 */
color: white; /* 設置p文字顏色為白色 */
font-size: 20px; /* 設置p字體大小為20像素 */
text-align: center; /* 設置p文本居中對齊 */
padding: 10px; /* 設置p內邊距為10像素 */
}

以上代碼中，首先給包含圖片和p元素的div元素設置相對定位，然后給p元素設置絕對定位，并根據需要設置相應的定位屬性，如bottom、left。此外，還可以根據實際需求設置p元素的其他CSS屬性，以實現更好的布局效果。

總之，使用CSS相對定位給圖片做布局是一種非常實用的技術，在網頁設計中有著廣泛的應用。只要掌握了相對定位和絕對定位的原理，就能夠輕松實現圖片布局效果的優化和美化。