HTML5是目前前端開發中使用最廣泛的一種語言，它可以輕松地使我們將豐富的圖像和視覺效果添加到我們的網站中。但是，在將圖像添加到我們的網站中時，我們經常需要控制它們在頁面上的層次。這可以通過CSS的z-index屬性來實現。 下面是代碼演示如何使用CSS的z-index屬性來設置頁面中圖像的層次。 首先，我們需要在HTML中定義我們的圖像。我們可以使用img標簽來添加圖像。

<img src="example.jpg" alt="Example Image" />

然后，我們可以使用CSS來設置圖像的層級。我們可以使用z-index屬性，并將其設置為一個大于0的數字，如下所示。

<style>
img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>

在這個例子中，我們將z-index設置為1。這意味著在所有沒有z-index屬性的HTML元素之上，我們的圖像將始終處于第一位。如果我們想讓圖像位于其他元素的下方，我們可以將z-index設置為更低的數字。 我們也可以將多個圖像放置在不同的層次上。例如，我們可以使用以下代碼將第二個圖像設置為比第一個圖像更高的層級。

<img src="example2.jpg" alt="Example Image 2" />
<style>
img:first-child {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
img:last-child {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
</style>

這將使第二個圖像始終位于第一個圖像的上方。 總而言之，使用CSS的z-index屬性可以輕松地設置HTML5中圖像的層次。我們可以將圖像放置在不同的層級上，并將其在頁面上定位在不同的位置。這個方法不僅可以改善我們網站的外觀，還可以提高用戶交互性和體驗。