CSS盒子模型是CSS布局模型的基礎(chǔ)，幾乎所有的網(wǎng)頁(yè)設(shè)計(jì)中都會(huì)用到它。但是，有時(shí)候可能會(huì)遇到一些盒子重合的情況。

比如兩個(gè)盒子的定位發(fā)生了重疊，這個(gè)時(shí)候需要在CSS中設(shè)置z-index屬性，值越大的盒子會(huì)覆蓋值較小的盒子。

/* 定義兩個(gè)盒子，第一個(gè)盒子默認(rèn)在上面 */
.box1 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: green;
z-index: 2;
}

上面的例子中，box2盒子在box1盒子的上方，因?yàn)樗膠-index值較大。

相反，當(dāng)兩個(gè)盒子的z-index值相同時(shí)，它們的排列順序會(huì)根據(jù)它們?cè)贖TML代碼中出現(xiàn)的順序來(lái)決定。后出現(xiàn)的盒子會(huì)排在前面。

/* 定義兩個(gè)z-index值相同的盒子 */
.box3 {
position: absolute;
top: 150px;
left: 150px;
width: 100px;
height: 100px;
background: blue;
z-index: 3;
}
.box4 {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
background: yellow;
z-index: 3;
}

在上面的例子中，box4盒子會(huì)排在box3盒子前面，因?yàn)樗霈F(xiàn)的順序在后面。

總之，在處理盒子重疊的情況時(shí)，我們需要注意z-index屬性和盒子出現(xiàn)的順序，以便達(dá)到所需的效果。