<div>元素在HTML中被用來創建分區或容器，它們可以幫助我們將網頁的不同部分分組和組織起來。而當多個<div>元素重疊在一起時，我們需要了解它們的疊加順序來決定它們在網頁上的可見性和交互性。
<div>元素的疊加順序是由CSS中的z-index屬性來決定的。z-index屬性定義了一個元素在垂直方向上的層級順序，值越大的元素會覆蓋在值較小的元素之上。但需要留意的是，z-index屬性只對定位（position）屬性為relative、absolute或fixed的元素有效。
下面我們通過幾個代碼案例來詳細解釋<div>元素的疊加順序。
案例一：同時使用z-index屬性和背景顏色

，我們創建一個包含兩個<div>元素的網頁。我們給每個<div>元素添加不同的背景顏色，并通過z-index屬性來定義它們的層級順序。

<pre>html
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 20px;
border: 1px solid black;
}
<br>
    .box1 {
background-color: red;
z-index: 1;
}
<br>
    .box2 {
background-color: blue;
z-index: 2;
}
</style>
<br>
<div class="box box1"></div>
<div class="box box2"></div>

在上面的代碼中，我們創建了兩個寬高為200px的<div>元素，分別具有.box1和.box2的類名。.box類定義了每個<div>元素的共同樣式，需要注意的是，我們給它們的定位屬性設置為relative，這樣z-index屬性才會生效。

.box1的背景顏色是紅色，z-index屬性為1；.box2的背景顏色是藍色，z-index屬性為2。

在這種情況下，.box2元素會覆蓋在.box1元素之上，因為它的z-index屬性值較大。

案例二：使用負數的z-index屬性

接下來，我們來看一個使用負數z-index屬性的案例。

<pre>html
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 20px;
border: 1px solid black;
}
<br>
    .box1 {
background-color: red;
z-index: -1;
}
<br>
    .box2 {
background-color: blue;
z-index: 1;
}
</style>
<br>
<div class="box box1"></div>
<div class="box box2"></div>

.box1的z-index屬性值為-1，.box2的z-index屬性值為1。

根據規則，具有較小z-index屬性值的元素會被具有較大z-index屬性值的元素覆蓋。但如果兩個元素的z-index屬性值都是負數，那么它們的層級順序將由它們在DOM中的位置而決定。

在這個案例中，.box2元素會覆蓋在.box1元素之上，因為即使.z-index屬性為-1，.box1元素仍然位于DOM中的.box2元素之前。

案例三：使用不同定位屬性的<div>元素

最后，我們來看一個使用不同定位屬性的<div>元素的案例。

<pre>html
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 20px;
border: 1px solid black;
}
<br>
    .box1 {
background-color: red;
z-index: 1;
}
<br>
    .box2 {
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
</style>
<br>
<div class="box box1"></div>
<div class="box box2"></div>

在這個案例中，我們將.box2元素的定位屬性設置為absolute，并且設置了top和left屬性。通過這樣的設定，.box2元素會相對于它最近的一個具有position屬性的祖先元素進行定位，這里就是整個頁面。

因此，.box2元素會覆蓋在.box1元素之上，無論.box1的z-index屬性值如何。

綜上所述，了解<div>元素的疊加順序對于設計和布局具有重要的意義。通過使用z-index屬性，并結合元素的定位屬性，我們可以精確地控制<div>元素的在網頁上的顯示效果和交互性。參考一些真實案例，我們可以更好地理解并應用這些概念。記住，熟練掌握疊加順序的規則和技巧將使我們的網頁更具吸引力和功能性。