CSS是網頁設計中不可或缺的一部分，能夠讓我們實現各種復雜的效果。其中最常見的一個需求就是讓兩個容器重疊。下面我們來學習如何使用CSS實現這個效果。

首先，我們需要有兩個容器。可以用div標簽來創建。下面是兩個基礎的div容器，他們默認是垂直擺放的，沒有重疊。

<div class="box1"> 這是第一個容器 </div>
<div class="box2"> 這是第二個容器 </div>

接下來，我們需要使用CSS去控制他們的位置和重疊。下面是一個簡單的CSS代碼實現，我們將box2容器的位置設置為相對于box1容器向上移動了50px。這樣，兩個容器就可以重疊了。

.box2 {
position: relative;
top: -50px;
}

當然，我們也可以完全控制兩個容器的位置和大小，同時實現重疊。下面是一個稍微復雜一些的實現方法。我們將box2容器的寬度設置為70%，高度設置為100px，然后使用position屬性和left和top來控制他們的位置。這樣，兩個容器的左邊和上邊就有了30%的空白重疊。

.box1 {
width: 100%;
height: 200px;
background-color: #eee;
position: relative;
z-index: 1;
}
.box2 {
width: 70%;
height: 100px;
background-color: #ccc;
position: absolute;
left: 30%;
top: 30px;
z-index: 2;
}

通過上面的實現方法，我們就能夠很容易地讓兩個容器重疊了。如果需要，我們還可以進一步優化代碼，增加容器的動畫特效、陰影效果等等。