CSS是前端開發(fā)過(guò)程中不可或缺的一環(huán)，尤其是在設(shè)計(jì)網(wǎng)站界面時(shí)往往需要將圖片定位到特定的位置。本文將介紹如何使用CSS使圖片位于DIV下方。

HTML 結(jié)構(gòu)：
<div class="container">
<img src="img1.jpg" alt="圖片1">
<p>這是一個(gè)段落文字。</p>
</div>
CSS 代碼：
.container {
position: relative; /* 設(shè)置相對(duì)定位 */
width: 500px;
height: 300px;
}
img {
position: absolute; /* 設(shè)置絕對(duì)定位 */
bottom: 0; /* 距離底部為0 */
left: 0; /* 距離左側(cè)為0 */
z-index: -1; /* 將圖片置于DIV的下層 */
}

在這段代碼中，我們首先創(chuàng)建了一個(gè)容器DIV，并向其中添加了圖片和一個(gè)段落。然后通過(guò)設(shè)置DIV的相對(duì)定位，使得圖片的絕對(duì)定位將相對(duì)于此DIV。

接著，我們將圖片從默認(rèn)的文檔流中移除，并將其絕對(duì)定位在DIV的底部和左側(cè)。最后，我們通過(guò)將Z-Index屬性設(shè)置為-1，將圖片放置到DIV的下層，從而使得DIV的內(nèi)容可以遮擋住圖片。

通過(guò)以上代碼，我們就成功地將一張圖片位于DIV下方。我們可以嘗試修改容器DIV的大小和樣式，從而更好地理解以上代碼的運(yùn)作方式。