div 疊加是指將多個 div 元素層疊在一起顯示的一種技術(shù)。通過設(shè)置 div 元素的 CSS 屬性，可以實現(xiàn)在同一位置上顯示多個 div 元素，使它們看起來像是疊在一起。

下面我們來看幾個代碼案例，詳細(xì)解釋說明 div 疊加的使用。

案例一：

<style>
.div1 {
width: 200px;
height: 200px;
background-color: red;
}
.div2 {
width: 200px;
height: 200px;
background-color: green;
position: relative; /* 設(shè)置相對定位 */
top: -100px; /* 向上移動 100px */
left: 100px; /* 向右移動 100px */
}
</style>
<br>
<div class="div1"></div>
<div class="div2"></div>

在這個案例中，我們創(chuàng)建了兩個 div 元素，分別設(shè)置了不同的背景顏色。通過將第二個 div 元素的 position 屬性設(shè)置為 relative，并且使用 top 和 left 屬性將其向上移動 100px、向右移動 100px，實現(xiàn)了兩個 div 元素在同一位置上疊加顯示。

案例二：

<style>
.div1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute; /* 設(shè)置絕對定位 */
top: 0;
left: 0;
}
.div2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute; /* 設(shè)置絕對定位 */
top: 0;
left: 0;
opacity: 0.5; /* 設(shè)置透明度為 0.5 */
}
</style>
<br>
<div class="div1"></div>
<div class="div2"></div>

在這個案例中，我們同樣創(chuàng)建了兩個 div 元素，并設(shè)置了不同的背景顏色。不同的是，這次我們將兩個 div 元素的 position 屬性都設(shè)置為 absolute，使它們相對于父元素進(jìn)行絕對定位。然后，我們將第二個 div 元素的 opacity 屬性設(shè)置為 0.5，使其透明度降低一半。通過這種方式，我們實現(xiàn)了兩個 div 元素的疊加顯示，且第二個 div 元素透明度降低。

案例三：

<style>
.div1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute; /* 設(shè)置絕對定位 */
top: 0;
left: 0;
z-index: 1; /* 設(shè)置層級為 1 */
}
.div2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute; /* 設(shè)置絕對定位 */
top: 0;
left: 0;
z-index: 2; /* 設(shè)置層級為 2 */
}
</style>
<br>
<div class="div1"></div>
<div class="div2"></div>

在這個案例中，我們同樣創(chuàng)建了兩個 div 元素，并設(shè)置了不同的背景顏色。這次，我們分別為兩個 div 元素設(shè)置了不同的 z-index 屬性，使第二個 div 元素的層級高于第一個 div 元素。通過這種方式，我們實現(xiàn)了兩個 div 元素的疊加顯示，且第二個 div 元素位于第一個 div 元素之上。

通過以上幾個案例，我們可以清楚地了解到 div 疊加的實現(xiàn)方法。通過設(shè)置不同的 CSS 屬性，我們可以讓 div 元素在同一位置上層疊顯示，實現(xiàn)各種各樣的效果。