解決CSS兩個盒子重疊的方法

在CSS中，當兩個盒子（div、span等）相互重疊時，可以通過調整盒子的位置、大小或者添加一些樣式來避免重疊，以下是一些常見的解決方法：

1、調整盒子的位置：通過改變盒子的位置，可以避免它們相互重疊，可以使用position屬性來設置盒子的位置，如absolute、relative或fixed。

2、調整盒子的大小：通過調整盒子的大小，也可以避免它們相互重疊，可以使用width和height屬性來設置盒子的大小。

3、添加樣式：在盒子上添加一些樣式，如border、padding和margin等，也可以避免它們相互重疊，可以通過設置margin-top和margin-bottom來調整盒子的上下間距。

以下是一個示例代碼，展示了如何避免兩個盒子相互重疊：

<div style="position: relative; width: 200px; height: 200px; background-color: #f00;"></div>
<div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: #0f0;"></div>

在這個示例中，***個盒子使用position: relative來設置其位置為相對于其正常位置，而第二個盒子使用position: absolute來設置其位置為相對于***近的定位祖先元素（在本例中為***個盒子），通過調整第二個盒子的top和left屬性，可以避免它與***個盒子相互重疊。