許多初學者在設計網頁時可能會遇到一個比較困擾的問題：div元素重疊覆蓋。這種情況往往會讓頁面顯得非常雜亂，影響用戶的使用體驗。幸運的是，CSS提供了一些方法來解決這個問題。

首先，讓我們來看一下重疊覆蓋是怎么發生的。當頁面布局中存在多個div元素時，每個div元素會默認被設置為“position: static”。這意味著它們會按照HTML文件中的順序從上往下排列，如果它們之間的內容發生重疊，后面的div元素將會遮擋住前面的元素。如下圖所示：

<div class="box1"></div>  
<div class="box2"></div>  
<div class="box3"></div>

如果這些div元素都沒有設置任何位置屬性，它們會重疊在一起，如下圖所示：

.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
}

為了解決這個問題，我們可以使用CSS中的“position”屬性來改變div元素的定位方式。常用的定位方式有“relative”、“absolute”和“fixed”。我們可以把后面的div元素設置為“position: relative”，這樣它們就會相對于前面一個div元素進行定位，而不是覆蓋在它的上面。如下圖所示：

.parent {
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
position: relative;
left: 50px;
top: 50px;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 100px;
top: 100px;
}

除了“relative”之外，我們還可以使用“absolute”和“fixed”來改變div元素的定位方式。相對于前面的定位方式而言，“absolute”可以讓元素相對于文檔流之外的父元素進行定位，而“fixed”可以讓元素相對于視口進行定位。在使用這些定位方式時，我們需要設置元素的“left”、“right”、“top”和“bottom”屬性，以確保它們被正確地定位。

總的來說，使用CSS中的“position”屬性可以幫助我們解決div元素重疊覆蓋的問題。我們只需要根據頁面布局的需求選擇合適的定位方式，并設置相關屬性，就可以讓頁面呈現出更加清晰、舒適的視覺效果。