<div>層疊代碼是一種在 HTML 和 CSS 中常用的技術，它允許我們將多個元素放置在同一位置，并通過層疊順序控制它們的可見性和相對順序。通過使用<div>元素，我們可以構建復雜的布局結構，實現更豐富的用戶界面效果。在本文中，我們將通過幾個代碼案例來詳細解釋和說明<div>層疊代碼的使用方法。
第一個案例是一個基本的<div>層疊布局示例。在這個案例中，我們創建了一個包含兩個<div>元素的容器，并將它們放置在同一位置。通過為每個<div>元素設置不同的背景顏色和透明度，我們可以看到它們是如何相互疊放的。

<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; background-color: red; opacity: 0.5; width: 100px; height: 100px;"></div>
<div style="position: absolute; top: 0; left: 0; background-color: blue; opacity: 0.5; width: 100px; height: 100px;"></div>
</div>

在這個示例中，我們使用了絕對定位（position: absolute）來將兩個<div>元素放置在同一位置。通過設置不同的透明度和背景顏色，我們可以看到藍色的<div>元素位于紅色的<div>元素之上。
第二個案例是一個更復雜的<div>層疊布局示例，其中我們使用了層疊順序（z-index）屬性來控制元素的相對順序。在這個案例中，我們創建了一個包含三個<div>元素的容器，通過設置不同的層疊順序和透明度，實現了覆蓋和疊放的效果。

<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; background-color: red; opacity: 0.5; width: 100px; height: 100px; z-index: 1;"></div>
<div style="position: absolute; top: 20px; left: 20px; background-color: blue; opacity: 0.5; width: 100px; height: 100px; z-index: 2;"></div>
<div style="position: absolute; top: 40px; left: 40px; background-color: green; opacity: 0.5; width: 100px; height: 100px; z-index: 3;"></div>
</div>

在這個示例中，我們分別給每個<div>元素設置了不同的層疊順序（z-index），通過設置較高的層疊順序，我們可以將某個<div>元素置于其他元素之上，從而實現覆蓋效果。
通過上述兩個案例的代碼和解釋，我們可以看到<div>層疊代碼的使用方法。通過設置透明度、背景顏色和層疊順序，我們可以輕松控制元素在同一位置的相對顯示順序和可見性。這種技術在構建復雜布局和實現各種用戶界面效果時非常有用，大大提高了用戶體驗。希望本文對您理解和使用<div>層疊代碼有所幫助。