CSS中的圖層層級是一個非常重要的概念，它決定了網頁中元素的顯示順序。當多個元素重疊在一起時，圖層層級的設置可以決定哪個元素在上，哪個元素在下。 在CSS中，我們可以通過z-index屬性來設置元素的圖層層級。z-index屬性的取值可以是整數、auto、inherit等。z-index值越大的元素，它就越靠近用戶視覺。 下面示例中我們使用了3個塊級元素div，div在HTML中默認是塊級元素。并在CSS中設置了它們的z-index，通過比較它們之間的z-index，我們可以看到不同的層級之間的效果。

<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box green"></div>
.box {
position: absolute;
width: 100px;
height: 100px;
}
.blue {
background-color: blue;
z-index: 3;
}
.yellow {
background-color: yellow;
z-index: 2;
top: 50px;
left: 50px;
}
.green {
background-color: green;
z-index: 1;
top: 100px;
left: 100px;
}

HTML中三個元素的樣式類名分別為box blue、box yellow、box green，分別代表藍色、黃色、綠色的元素。 在CSS中，我們使用了z-index屬性來設置每個元素的圖層層級，元素的層級分別是3、2、1。因此，我們期望看到的效果是藍色元素出現在最上面，其次是黃色元素，最后是綠色元素。 如果你對CSS的層疊上下文有疑惑，你可以將這些div嵌套在一個更大的元素之內，然后設置它的z-index。這個更大的元素可以創建一個層堆棧，它可以使你更好的控制每個元素與其他元素之間的關系，從而創建更具層次感的設計。 無論是在哪個案例中，理解CSS的z-index屬性都非常重要。通過使用它，你可以更好地控制你的網頁設計和避免層疊問題。