<div> CSS疊加是指將多個CSS樣式應用于同一個HTML元素的過程。通過在HTML文檔中使用<div>標簽并在CSS文件中定義不同的樣式，我們可以實現樣式的疊加效果。這種疊加可以使網頁更加美觀，增強用戶體驗。在接下來的幾個代碼案例中，我們將詳細解釋如何通過<div> CSS疊加來實現不同的效果。
第一個案例是創建一個簡單的導航欄。我們可以使用<div>標簽來創建一個水平的導航欄，每個導航項都有不同的樣式。例如，我們可以定義一個類名為".nav-item"的CSS樣式，用于設置導航項的基本樣式，如背景顏色、邊框等。然后，我們可以使用另一個類名為".active"的CSS樣式來設置被選中的導航項的樣式，如字體顏色、背景顏色等。下面是相應的HTML和CSS代碼：

HTML代碼：
<p><div class="nav">
<div class="nav-item">Home</div>
<div class="nav-item active">About</div>
<div class="nav-item">Services</div>
<div class="nav-item">Contact</div>
</div></p>
<br>
CSS代碼：
<p>.nav-item {
display: inline-block;
padding: 10px;
margin-right: 10px;
background-color: #eee;
}
<br>
.active {
background-color: #333;
color: white;
}</p>

在上面的代碼中，我們使用了兩個不同的類名來定義導航項的不同樣式。其中，".nav-item"類設置了基本樣式，而".active"類設置了被選中導航項的樣式。通過在<div>標簽上添加相應的類名，我們可以將兩個樣式疊加在一起，實現導航欄的效果。
第二個案例是實現響應式布局。我們可以使用<div>標簽和CSS樣式來創建一個自適應的網格布局。例如，我們可以將網頁分成幾個不同的列，并使用CSS樣式設置每個列的寬度和間距。下面是一個示例：

HTML代碼：
<p><div class="grid">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div></p>
<br>
CSS代碼：
<p>.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
<br>
.column {
background-color: #eee;
padding: 10px;
}</p>

在上面的代碼中，我們使用了一個<div>標簽來包含三個列，每個列都有一個類名為".column"的樣式。通過在<div>標簽上添加類名，我們可以將相應的樣式應用到每個列上，實現網格布局。
<div> CSS疊加是一種強大的技術，可以通過將不同的CSS樣式應用于同一個HTML元素來實現更豐富的效果。通過靈活運用<div>標簽和CSS樣式，我們可以創建出各種不同的布局、導航欄等組件，使網頁更加有吸引力和用戶友好性。在實際應用中，我們可以根據需要添加更多的樣式和類名，以實現更復雜的效果。希望本文對你理解和運用<div> CSS疊加有所幫助！</div>