<div> 圖層重疊是指在HTML中，可以通過CSS設置不同元素的定位和堆疊順序，使它們在網頁中重疊顯示。這種重疊效果可以為網頁帶來豐富的視覺效果和布局效果。本文將介紹一些div圖層重疊的案例，以幫助讀者更好地理解和掌握這一技術。
第一個案例是實現一個簡單的圖層疊加效果。通過設置兩個div元素的定位屬性和背景色，可以使它們重疊顯示。下面的代碼展示了如何實現這個效果：

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

在這個案例中，外層的div元素使用了相對定位（position: relative），它的寬度和高度為200px，并設置了紅色背景色。內層的div元素使用了絕對定位（position: absolute），它相對于外層的div元素偏移50px的水平位置和50px的垂直位置，寬度和高度為100px，并設置了藍色背景色。當這兩個div元素重疊在一起時，藍色的div元素會覆蓋在紅色的div元素上方，形成疊加效果。
第二個案例是實現一個層疊菜單的效果。通過設置多個div元素的定位屬性和層疊順序，可以實現一個層疊的菜單效果。下面的代碼展示了如何實現這個效果：

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

在這個案例中，外層的div元素使用了相對定位（position: relative），它的寬度和高度為200px，并設置了紅色背景色。內層的三個div元素都使用了絕對定位（position: absolute），分別相對于外層的div元素定位在不同的位置，寬度和高度都為100px，并分別設置了藍色、綠色和黃色的背景色。由于這三個div元素的層疊順序是按照它們在HTML中的順序決定的，所以黃色的div元素會覆蓋在綠色的div元素上方，而綠色的div元素會覆蓋在藍色的div元素上方，形成層疊的菜單效果。
通過以上兩個案例的介紹，相信讀者已經對div圖層重疊有了初步的了解。在實際應用中，我們可以根據具體需求，靈活運用定位和層疊順序的設置，實現各種各樣的圖層重疊效果，從而為網頁帶來更加豐富多樣的內容展示和布局樣式。希望本文對讀者理解和應用div圖層重疊技術有所幫助。