CSS是網(wǎng)頁設(shè)計(jì)中不可或缺的一部分，能夠讓我們實(shí)現(xiàn)各種復(fù)雜的效果。其中最常見的一個(gè)需求就是讓兩個(gè)容器重疊。下面我們來學(xué)習(xí)如何使用CSS實(shí)現(xiàn)這個(gè)效果。

首先，我們需要有兩個(gè)容器。可以用div標(biāo)簽來創(chuàng)建。下面是兩個(gè)基礎(chǔ)的div容器，他們默認(rèn)是垂直擺放的，沒有重疊。

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

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

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

當(dāng)然，我們也可以完全控制兩個(gè)容器的位置和大小，同時(shí)實(shí)現(xiàn)重疊。下面是一個(gè)稍微復(fù)雜一些的實(shí)現(xiàn)方法。我們將box2容器的寬度設(shè)置為70%，高度設(shè)置為100px，然后使用position屬性和left和top來控制他們的位置。這樣，兩個(gè)容器的左邊和上邊就有了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;
}

通過上面的實(shí)現(xiàn)方法，我們就能夠很容易地讓兩個(gè)容器重疊了。如果需要，我們還可以進(jìn)一步優(yōu)化代碼，增加容器的動(dòng)畫特效、陰影效果等等。