CSS重影指的是頁面上某個元素出現了不應該出現的覆蓋效果，看起來像是有重影的情況。它一般由于CSS的層疊樣式（z-index）設置錯誤導致。在這篇文章中，我們將會學習如何避免CSS重影。

.example {
position: relative;
z-index: 1;
}
.example .sub {
position: absolute;
z-index: -1;
}

上面這段代碼表示了使用層疊樣式（z-index）來控制元素在頁面上的層次關系。當我們設置元素A的z-index為1，它的子元素B的z-index為-1時，子元素B會被置于元素A的下方，造成CSS重影的問題。

為了避免CSS重影，我們需要確保元素的層疊樣式（z-index）設置正確。我們可以使用以下幾種方法來解決問題：

• 使用相對定位（position: relative）代替絕對定位（position: absolute）來控制元素的位置
• 避免使用負值的層疊樣式（z-index）
• 使用高層疊樣式（z-index）值的元素來覆蓋低層疊樣式值的元素

總之，避免CSS重影需要我們仔細準確地使用層疊樣式（z-index），確保不同元素之間的層次關系設置正確。