HTML與CSS是前端開發的重要基礎，其中最常用的兩種語言。 在web開發中常常遇到HTML和CSS重疊的情況，這時候就需要學會處理。

div {
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 50px;
}
p {
width: 150px;
height: 150px;
background-color: green;
position: relative;
left: 50px;
top: 50px;
}

以上代碼就是一個HTML元素div和一個p元素的樣式。但是，由于p元素的position屬性是相對定位，所以導致它與div元素重疊了。

為了解決這個問題，可以使用以下兩種方法：

• 使用z-index屬性
• 修改元素的布局

首先，我們來看看使用z-index屬性的方法。

div {
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 50px;
z-index: 1; /*設置元素的堆疊順序*/
}
p {
width: 150px;
height: 150px;
background-color: green;
position: relative;
left: 50px;
top: 50px;
z-index: 2; /*設置元素的堆疊順序*/
}

通過給p元素和div元素設置不同的z-index值，就可以讓p元素顯示在div元素的上面。

另一種方法是修改元素的布局。可以通過修改元素的定位方式來使它們不再重疊。

div {
width: 200px;
height: 200px;
background-color: red;
position: absolute; /*修改為絕對定位*/
left: 50px;
}
p {
width: 150px;
height: 150px;
background-color: green;
position: absolute; /*修改為絕對定位*/
left: 50px;
top: 250px; /*修改top值*/
}

通過將元素的position屬性改為absolute，并在left和top屬性中設置不同的值，就可以讓它們錯開而不再重疊了。

以上兩種方法都可以解決HTML和CSS重疊的問題，具體使用哪一種取決于具體的情況和需求。