在使用CSS搭建網(wǎng)頁時，經(jīng)常需要在一個盒子內(nèi)插入圖片。但有時在盒子內(nèi)插入多張圖片時，會產(chǎn)生重疊的現(xiàn)象，影響網(wǎng)頁的美觀性。那么，如何避免圖片重疊呢？

其實，避免圖片重疊的方法有很多，下面介紹其中的兩種常用方法。

1. 使用CSS的float屬性

.box {
width: 100%;
overflow: hidden;
}
.box img {
float: left;
margin-right: 10px;
}

首先，將圖片按照一定的順序依次插入盒子中。然后，給盒子添加CSS樣式，設置寬度為100%、溢出隱藏。接著，對圖片元素添加float:left（左浮動）屬性和margin-right（右邊距）屬性，讓圖片像一排排木板一樣排列在盒子內(nèi)，不會互相覆蓋。

2. 使用CSS的position屬性

.box {
width: 100%;
height: 400px;
position: relative;
}
.box img {
width: 30%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.box img:nth-child(2) {
left: 35%;
}
.box img:nth-child(3) {
left: 70%;
}

同樣先將圖片插入盒子中，然后給盒子添加CSS樣式，設置寬度為100%、高度為400px、相對定位。接著對圖片元素添加CSS樣式，設置寬度為30%、高度自適應、絕對定位、并將top和left屬性設為0。這樣可以讓第一張圖片停留在盒子的左上角，避免重疊。接著，對第二張和第三張圖片設置left屬性，使其分別位于盒子的中央和右上角。

兩種方法各有優(yōu)劣，根據(jù)實際情況可以選擇適合自己的方法。這樣可以使網(wǎng)頁看起來更整潔、美觀。