使用CSS設置元素的堆疊順序 在Web設計中，我們經常需要將一個元素放在另一個元素之上，比如將一個按鈕放在一張圖片的上面，或者是將一個導航欄放在一個頁面主體的上面。在這種情況下，我們需要使用CSS來設置元素的堆疊順序。 CSS的堆疊順序是通過z-index屬性來控制的。z-index屬性可以設置一個元素的堆疊順序，值越大，堆疊的越上面。如果兩個元素的z-index屬性相同，則它們的堆疊順序將根據它們在HTML中的先后順序確定。也就是后面的元素會在前面的元素之上。 下面是一個例子，我們將一個藍色的div放在一個紅色的div之上。在HTML中，我們先放置了紅色的div，然后是藍色的div。

<div class="red"></div>
<div class="blue"></div>

在CSS中，我們需要設置兩個div的定位為絕對定位，這樣它們才能被完全定位。然后，我們可以使用z-index屬性來設置它們的堆疊順序。

.red {
position: absolute;
top: 50px;
left: 50px;
width:200px;
height: 200px;
background-color: red;
z-index: 1;
}
.blue {
position: absolute;
top: 100px;
left: 100px;
width:100px;
height: 100px;
background-color: blue;
z-index: 2;
}

在上面的代碼中，我們設置紅色div的z-index為1，藍色div的z-index為2。這樣藍色div就會在紅色div之上顯示。 總結 CSS的z-index屬性是用來控制元素的堆疊順序的。通過設置不同的z-index值，我們可以將一個元素放在另一個元素之上或之下。如果兩個元素的z-index相同，則它們的堆疊順序將根據它們在HTML中的先后順序來確定。在使用z-index屬性時，請記得將需要堆疊的元素設置為絕對定位。