Web 頁面中經常會出現圖片重疊的情況，而這樣的視覺效果通常不會給用戶帶來良好的體驗。幸運的是，CSS 提供了多種方法來避免圖片重疊的問題。 一種解決辦法是使用“z-index”。Z軸定位是CSS中用于處理相對層疊順序的一個屬性，z-index 屬性可以定義一個元素的堆疊順序。當兩個元素存在堆疊的情況時，較大的 z-index 置于較小的 z-index 之上。這可以通過在 CSS 樣式表中對元素（通常是圖片）設置 z-index 屬性來實現，例如：

img {
position: absolute;
z-index: 1;
}

這個例子展示了如何給圖片設置 z-index 屬性。我們使用“position: absolute”來確保圖片位置準確，并為之設置了 z-index 值為 1。如果圖片存在重疊的情況，具有更高 z-index 值的元素將自然地位于另一個元素之上。 另一個解決方案是使用 CSS 的 “float” 屬性。該屬性可以讓元素脫離文檔流，在頁面上自由浮動。如果您需要在頁面上放置多個圖像，可以使用 float 屬性來確保它們不會相互疊加：

img {
float: left;
margin-right: 10px;
}

這個例子演示了如何通過為圖像設置“float: left”來實現。這將使它們自動向左浮動，而不是緊密堆疊在一起。 除了上述這些方法，還有其他一些技巧可以用來避免圖片重疊的問題。例如，使用 CSS 中的 “clear” 屬性來確保圖像不會包裹在其他元素周圍：

.clear {
clear: both;
}

這個例子演示了如何用 CSS 中的“clear: both”來防止圖像包裹在浮動元素周圍。 總之，CSS 提供了多種方法來避免網頁中的圖像重疊現象。無論您是使用 z-index、float 還是 clear 屬性，這些方法都可以為您的網頁提供清晰而直觀的視覺效果。