在HTML和CSS中，圖層（也稱為元素）的顯示順序是非常重要的，因為它能夠影響我們設計的最終效果。當我們在編寫CSS時，可以通過使用z-index屬性來控制圖層的疊加順序。

在默認情況下，每個元素都會創建一個圖層。如果你沒有指定z-index屬性，那么元素的顯示順序將由它們在代碼中出現的順序決定。在這種情況下，后面的元素將覆蓋前面的元素。

/* HTML 代碼 */
/* CSS 代碼 */
#layer1 {
width: 200px;
height: 200px;
background-color: red;
}
#layer2 {
width: 100px;
height: 100px;
background-color: blue;
}

在上面的代碼中，#layer2元素出現在#layer1元素的后面。如果我們不設置z-index屬性，那么#layer2元素將會覆蓋#layer1元素。

如果我們想要改變圖層的順序，我們可以使用z-index屬性。這個屬性的值可以是任何整數（正數、負數或零），它定義了元素在圖層疊加中的位置。另外，z-index屬性只對定位元素（即position屬性不為static）起作用。

/* HTML 代碼 */
/* CSS 代碼 */
#layer1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 1;
}
#layer2 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
z-index: 2;
}

在上面的代碼中，我們設置了#layer1和#layer2元素的position為relative，并分別指定了它們的z-index屬性。由于#layer2元素的z-index比#layer1元素大，所以#layer2元素將覆蓋#layer1元素。

需要注意的是，當兩個元素的z-index值相同時，它們的疊加順序將由它們在代碼中出現的順序決定。此外，如果我們將z-index屬性應用于static或inherit定位的元素，那么這個屬性不會生效。

總的來說，z-index屬性是一個非常有用的樣式屬性，它能夠幫助我們控制元素的層疊順序。使用z-index屬性，我們可以改變元素的圖層順序，創造出更加豐富、復雜的設計效果。