<div>層級覆蓋是指在HTML和CSS中，通過使用<span style = "font-weight:bold;">z-index</span>屬性來控制元素在頁面上的顯示順序。在網頁設計中，如果一個元素的層級值（z-index）更高，它將覆蓋位于其下方的元素。這種技術可以用于創建各種效果，如彈出框、下拉菜單、輪播圖等，使頁面更加豐富和動態。</div>

下面通過幾個代碼案例來詳細解釋和說明div層級覆蓋的實際應用。

案例一：創建一個簡單的彈出框

<div style="position: relative;">
<div style="background-color: #f8f8f8; border: 1px solid #ccc; padding: 20px;">
<h2>這是一個彈出框</h2>
<p>這里可以放置彈出框的內容。</p>
</div>
<button style="position: absolute; top: 10px; right: 10px;">關閉</button>
</div>

在這個案例中，我們使用<span style = "font-weight:bold;">position</span>屬性將父級<div>的定位設置為<span style = "font-weight:bold;">relative</span>，子級<div>的定位設置為<span style = "font-weight:bold;">absolute</span>。我們還設置了一個關閉按鈕，使用戶可以關閉彈出框。通過設置較高的層級值（z-index），彈出框的<div>將覆蓋其他頁面元素。

案例二：創建一個下拉菜單

<div class="dropdown">
<button class="dropbtn">菜單</button>
<div class="dropdown-content">
<a href="#">選項1</a>
<a href="#">選項2</a>
<a href="#">選項3</a>
</div>
</div>

<style> .dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown:hover .dropdown-content { display: block; } </style>

在這個案例中，我們使用<span style = "font-weight:bold;">position</span>屬性將下拉菜單容器的定位設置為<span style = "font-weight:bold;">relative</span>。然后，我們設置下拉菜單內容的容器的<span style = "font-weight:bold;">position</span>屬性為<span style = "font-weight:bold;">absolute</span>，并設置<span style = "font-weight:bold;">z-index</span>屬性為1，這樣下拉菜單可以覆蓋其他頁面元素。通過使用<span style = "font-weight:bold;">:hover</span>選擇器，我們實現了鼠標懸停時顯示下拉菜單的效果。

案例三：創建一個輪播圖

<div class="slideshow-container">
<div class="mySlides fade">
<img src="slide1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="slide2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="slide3.jpg" style="width:100%">
</div>
</div>

<style> .slideshow-container { position: relative; max-width: 100%; margin: auto; z-index: 1; }
.fade { position: absolute; top: 0; width: 100%; height: 100%; z-index: 0; animation: fade 2s ease-in-out infinite; }
@keyframes fade { 0% {opacity: 1;} 33.33% {opacity: 0;} 66.66% {opacity: 0;} 100% {opacity: 1;} } </style> <script> var slideIndex = 0; showSlides();
function showSlides() { var slides = document.getElementsByClassName("mySlides"); for (var i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); } </script>

在這個案例中，我們使用<span style = "font-weight:bold;">position</span>屬性將輪播圖容器的定位設置為<span style = "font-weight:bold;">relative</span>，設置<span style = "font-weight:bold;">z-index</span>屬性為1，使其覆蓋頁面上的其他元素。每張幻燈片使用<span style = "font-weight:bold;">position</span>屬性設置為<span style = "font-weight:bold;">absolute</span>，并通過CSS動畫實現淡入淡出的效果。