CSS（Cascading Style Sheet）是一種用于設(shè)計網(wǎng)頁樣式的語言。在網(wǎng)頁布局中，CSS的重要性不言而喻。其中一個重要的應(yīng)用就是覆蓋布局。

/*html代碼*/
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
/*CSS代碼*/
.container {
display: flex;
flex-wrap: wrap;
}
.box1 {
width: 100%;
height: 100px;
background-color: red;
}
.box2 {
width: 50%;
height: 200px;
background-color: blue;
}

以上是一個簡單的網(wǎng)格布局，其中.box1和.box2都是<div>元素。其中.box2的寬度為50%，但是當頁面過小時，.box2就會出現(xiàn)重疊。此時我們希望能夠覆蓋這種情況，可以使用覆蓋布局。

.container {
display: flex;
flex-wrap: wrap;
position: relative; /*給.container設(shè)置定位屬性*/
}
.box1 {
width: 100%;
height: 100px;
background-color: red;
}
.box2 {
width: 50%;
height: 200px;
background-color: blue;
position: absolute; /*給.box2設(shè)置絕對定位*/
top: 100%; /*從父級底部開始*/
}

在上述代碼中，我們給.container設(shè)置了定位屬性，這樣.box2就可以相對.container進行定位。然后給.box2設(shè)置了絕對定位和top值為100%，這樣.box2就會從.container的底部開始向下延伸，當頁面過小時，會自動隱藏。在這種情況下，.box2就不會重疊并自動隱藏了。