CSS盒子模型是CSS布局的基礎。它由四個部分組成：內容區域、內邊距、邊框和外邊距。它們的總和是盒子的尺寸。其中，內容區域是元素中的實際內容，內邊距是內容和邊框之間的空間，邊框是內容區域和外邊距之間的邊框線，外邊距是盒子之間的空間。

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

盒子層級是指在文檔流中，盒子的層次順序。通過z-index屬性可以設置盒子的層級。層級越高的盒子會顯示在其他盒子之上。

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

通過設置不同的position屬性值，可以改變盒子的默認布局方式。其中，static表示元素在文檔流中正常布局，relative表示定位相對于自身的位置，absolute表示定位相對于父元素的位置，fixed表示定位相對于瀏覽器視窗。

.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

當多個盒子重疊在一起時，可以使用z-index屬性控制盒子的層級順序。值越大的盒子會顯示在最上面。

總之，CSS盒子模型和盒子層級是CSS布局中不可或缺的基礎。熟練掌握它們的使用，可以讓我們更好地掌控頁面布局和層級關系。