div 不覆蓋是指在網頁設計中，當多個div元素重疊在一起時，它們不會相互遮擋或覆蓋。這樣可以確保網頁的排版和布局按照設計者的意圖展現出來，保持可讀性和用戶體驗。在以下的文章中，我將通過幾個代碼案例來詳細解釋說明div 不覆蓋的原理和應用。
，讓我們來看一個簡單的例子。假設我們要創建一個包含兩個不同背景顏色的div元素的網頁。我們可以通過設置它們的位置屬性為"absolute"來實現層疊效果，同時使用z-index屬性來控制它們的顯示順序。下面的代碼示例展示了這個過程：

html
<style>
.box1 {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
top: 50px;
left: 50px;
z-index: 1;
}
<br>
    .box2 {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
top: 100px;
left: 100px;
z-index: 2;
}
</style>
<br>
<div class="box1"></div>
<div class="box2"></div>

在上述代碼中，box1元素的z-index屬性值為1，box2元素的z-index屬性值為2。根據層疊順序，box2會覆蓋box1，因為它的z-index值更高。這意味著box2將顯示在box1的上方，結果是div不會被覆蓋，從而保證了它們的可見性。
除了上述的z-index屬性，還有一種方法可以確保div不被覆蓋，那就是使用浮動(float)屬性。當一個div元素設置了float屬性時，它會從正常的文檔流中脫離出來，并且向左或向右浮動，直到碰到另一個浮動元素或父容器的邊界。下面的代碼示例展示了這個過程：

html
<style>
.box1 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
<br>
    .box2 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
</style>
<br>
<div class="box1"></div>
<div class="box2"></div>

在上述代碼中，box1和box2都設置了float屬性，并且浮動到父容器的左邊。因此，它們會按照從左到右的順序依次排列，而不會相互覆蓋。這種方法也可以用來創建多列布局，如新聞網站的內容列表等。
除了上述的兩種方法，還有其他一些CSS屬性和技巧可以確保div元素不相互覆蓋，如position屬性的relative值、display屬性的inline-block值等。根據不同的需求和設計，選取適合的方法來實現div不覆蓋的效果。
起來，div 不覆蓋可以通過設置z-index屬性、float屬性以及其他一些相關的CSS屬性和技巧來實現。它可以確保網頁的布局和排版按照設計者的意圖展現出來，提升用戶體驗和可讀性。在實際的網頁設計中，我們可以根據具體的需求選擇合適的方法來實現div不被覆蓋的效果。