CSS是網頁設計中非常重要的一部分，包括排版、顏色、字體、布局等都可以用CSS來控制。而控制圖層順序也是CSS的一個重要功能。在網頁設計中，圖層順序是非常重要的一環，不同元素的圖層順序決定了它們在頁面上的展示效果。下面我們就來詳細了解一下CSS如何控制圖層順序。

在CSS中，我們可以使用z-index屬性來控制不同元素在頁面上的層疊順序。z-index屬性表示元素在垂直方向上的層疊順序，取值為整數，數值越大，元素就越靠近視圖者。如果沒有指定z-index屬性，默認值是0。

下面是一些示例代碼來幫助理解：

/*HTML代碼*/
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
/*CSS代碼*/
.layer1 {
background-color: red;
height: 100px;
width: 100px;
}
.layer2 {
background-color: green;
height: 100px;
width: 100px;
position: relative;
left: 30px;
top: -30px;
z-index: 2;
}
.layer3 {
background-color: blue;
height: 100px;
width: 100px;
position: relative;
left: 60px;
top: -60px;
z-index: 1;
}

在上面的代碼中，我們定義了三個div元素，它們的class分別是layer1、layer2和layer3，然后我們使用CSS來控制它們的樣式。其中，layer1是默認層疊順序，它將會位于最底部。而我們在layer2和layer3中分別設置了position屬性為relative，然后通過left和top屬性來調整它們的位置。在layer2中，我們設置了z-index屬性為2，所以它會覆蓋在layer1和layer3的上方。而在layer3中，我們設置了z-index屬性為1，所以它會覆蓋在layer1的上方，但被layer2所覆蓋。

總之，在網頁設計中控制圖層順序是非常重要的，通過z-index屬性，我們可以輕松地控制不同元素在頁面上的層疊順序。希望這篇文章能夠幫助大家更好地理解CSS控制圖層順序。