CSS定位是一種常用的網頁設計技術，它可以控制元素在頁面上的位置和大小。在圖文排版中，CSS定位可以實現圖片和文字的布局效果。

首先，我們需要使用img標簽向HTML文檔中插入圖片：

<img src="picture.jpg" alt="Picture">

為了讓圖片和文字實現布局效果，我們需要將它們放到一個共同的容器中，并設置容器的位置和大小。可以使用div標簽來創建一個容器，并用CSS定位來控制它的位置和大小：

<div style="position:relative; width: 500px; height: 300px;">
<img src="picture.jpg" alt="Picture" style="position:absolute; top: 0; left: 0; width: 300px; height: 300px;">
<p style="position:absolute; top: 0; left: 320px; width: 180px; height: 300px;">
文字內容
</p>
</div>

在這個例子中，我們創建了一個寬度為500像素，高度為300像素的div容器，并將圖片和文字放在這個容器中。其中，圖片使用position:absolute定位，將它的左上角與div容器的左上角對齊，并設置寬度和高度為300像素。文字也使用position:absolute定位，將它的左上角與div容器的左上角保持一定的距離，并設置寬度和高度為180像素。

通過這樣的方式，我們就可以實現圖文的布局效果，使圖片和文字按照一定的規則排列在頁面上。