在開發網站時，經常會遇到CSS樣式被蓋住的問題。

.div1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
.div2 {
height: 150px;
width: 150px;
background-color: blue;
position: absolute;
left: 75px;
top: 75px;
}

以上代碼定義了兩個div元素，分別是

和。其中，div1元素位于(div2元素的下方。

然而，當網頁呈現時，div1元素卻被div2元素蓋住了，導致div1的樣式無法展示。

這是因為div2元素的z-index值高于div1元素的z-index值。因此，我們需要將div1元素的z-index值設為比div2元素更高的值才能有效地展示div1的樣式。

.div1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
}
.div2 {
height: 150px;
width: 150px;
background-color: blue;
position: absolute;
left: 75px;
top: 75px;
z-index: 0;
}

通過將div1元素的z-index值設為1，我們順利解決了CSS樣式被蓋住的問題。