CSS 的強大作用遠不止于為網頁添加樣式，還有一個非常有用的功能就是可以用 CSS 對圖片進行旁放字的處理。

我們通常在網頁中會使用圖片來增加頁面的視覺效果，但是如果圖片中有文字需要表達，就需要在下方添加文字說明，但這樣不僅浪費了頁面空間，而且看起來也不太美觀。這時候，使用 CSS 圖片旁放字技術就可以解決這個問題。

要實現圖片旁放字，需要用到 CSS 的 position 和 z-index 屬性。具體方法如下：在 HTML 中插入 img 標簽，然后使用 CSS 對圖片進行定位和添加文本。

img {
float: left;
margin-right: 10px;
position: relative;
z-index: 1;
}
.img-text {
position: relative;
top: -5px;
z-index: 2;
}

上面的代碼中，我們通過 float 屬性使圖片向左浮動，然后通過 margin-right 控制圖片和文本之間的距離，接下來使用相對定位來控制圖片與文本的關系，再使用 z-index 屬性指定層疊順序，讓文本在圖片上方。

最后，在 HTML 中添加文本即可。文本需被包裹在一個標簽中，并為該標簽添加我們添加的 .img-text 類。

總體來說，CSS 圖片旁放字技術為網頁設計者提供了更好的頁面排版技巧和美觀效果，值得學習和掌握。