CSS盒子層疊是CSS中非常重要的一個(gè)概念。在CSS中，每一個(gè)元素都是一個(gè)盒子，而這些盒子可以重疊在一起，形成層疊效果。當(dāng)多個(gè)盒子重疊在一起時(shí)，就需要了解CSS盒模型及層疊順序來確定它們的顯示順序。

CSS盒模型指的是一個(gè)元素被看做一個(gè)矩形盒子，包括內(nèi)容區(qū)域、內(nèi)邊距、邊框和外邊距四個(gè)部分。這個(gè)盒子的大小可以通過width和height屬性來控制，而邊框、內(nèi)邊距以及外邊距則可以通過對(duì)應(yīng)的屬性來設(shè)定。

.box{
width: 200px;
height: 200px;
padding: 20px;
border: 1px solid black;
margin: 20px;
}

層疊順序指的是當(dāng)多個(gè)盒子重疊在一起時(shí)，瀏覽器會(huì)根據(jù)其所處的層疊上下文以及z-index屬性值來決定盒子的顯示順序。

在同一層疊上下文中，z-index值越高的元素越會(huì)在上層顯示。當(dāng)兩個(gè)元素層疊上下文不同時(shí)，它們的層疊關(guān)系就不再受z-index控制，而是由它們?cè)谖臋n流中出現(xiàn)的順序決定。同時(shí)，如果兩個(gè)元素z-index值相同，則靠后出現(xiàn)的元素會(huì)在上層顯示。

可以使用z-index屬性來設(shè)定元素的層疊順序，數(shù)值越高，顯示在上層的可能性就越大。

.box1{
z-index: 1;
}
.box2{
z-index: 2;
}

通過了解CSS盒子模型及層疊順序，我們就可以在頁面布局中靈活使用CSS盒子層疊，達(dá)到更好的視覺效果。