<div>標簽是HTML中用來創建一個容器來包裹其他元素的標簽。當我們在網頁中使用<div>標簽來創建多個容器時，有時會出現容器重疊的情況。這種重疊可能導致網頁布局混亂，影響用戶體驗。為了避免這種情況的發生，我們可以使用一些技巧來調整和控制<div>標簽的樣式和位置。
，我們可以使用CSS的position屬性來控制<div>標簽的定位方式。position屬性有幾種取值，比如static、relative、absolute和fixed。其中，relative是相對定位，absolute是絕對定位，fixed是固定定位。
在下面的代碼案例中，我們創建了兩個<div>標簽，分別表示一個紅色的矩形和一個藍色的矩形。它們默認是重疊在一起的。

<p><div id="red" style="background-color: red; width: 200px; height: 200px;"></div></p>
<p><div id="blue" style="background-color: blue; width: 200px; height: 200px;"></div></p>

為了調整它們的位置，我們可以將其中一個<div>標簽的position屬性設置為relative，并使用top和left屬性來確定其位置。具體來說，我們設置紅色矩形的top值為50px，left值為50px。

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

這樣一來，紅色矩形就會相對于默認位置向下和向右移動50個像素。
另外一種方式是使用z-index屬性來控制<div>標簽的層級關系。層級關系決定了哪個<div>標簽會顯示在最上面。z-index屬性的值越大，表示層級越高，會顯示在更上面。
下面的代碼案例演示了如何使用z-index屬性來調整兩個<div>標簽的層級關系，從而避免重疊。

<p><div id="red" style="background-color: red; width: 200px; height: 200px; position: relative; top: 0; left: 0; z-index: 1;"></div></p>
<p><div id="blue" style="background-color: blue; width: 200px; height: 200px; position: relative; top: -150px; left: 150px; z-index: 2;"></div></p>

在這個例子中，我們給紅色矩形的z-index屬性設置了一個比藍色矩形更小的值，這樣藍色矩形就會顯示在紅色矩形的上面，避免了重疊的情況。
除了以上兩種方法，我們還可以使用CSS的float屬性和clear屬性來控制<div>標簽的排列方式。如果我們將一個<div>標簽設置為float: left，那么它將會向左浮動，其他的元素會圍繞它排列。如果我們在下一個<div>標簽中使用clear: left，那么它將會斷開前一個<div>標簽的浮動，從而避免重疊。
下面是一個具體的代碼案例：

<p><div id="red" style="background-color: red; width: 200px; height: 200px; float: left;"></div></p>
<p><div id="blue" style="background-color: blue; width: 200px; height: 200px; clear: left;"></div></p>

在這個例子中，紅色矩形向左浮動，而藍色矩形使用clear: left來斷開前一個矩形的浮動，從而避免了重疊。
總之，<div>標簽的重疊問題在網頁設計中是一個常見的挑戰。通過使用CSS的position屬性、z-index屬性、float屬性和clear屬性，我們可以很好地控制和調整<div>標簽的樣式和位置，從而避免重疊，實現良好的網頁布局。