<給出解釋> <解釋 canvas 和 div 的層級關系，以及如何改變層級> 在Web開發中，HTML5的canvas和div都是常見的元素，它們可以在網頁上呈現各種圖形和內容。canvas是通過使用JavaScript來繪制圖形而創建的元素，而div則是網頁布局和內容的主要容器。每個頁面中canvas和div的定位和層級非常重要，它們可以決定元素在屏幕上的顯示順序和覆蓋關系。

下面我們來看一些代碼案例，以詳細解釋canvas和div的層級關系。

<案例一：層級順序>

<code>
<div id="div1" style="position: absolute; z-index: 2;">
This is a div element.
</div>
<br>
    <canvas id="canvas1" style="position: absolute; z-index: 1;">
Your browser does not support HTML5 canvas.
</canvas>
<br>
    <script>
// canvas和div在層級上的顯示順序遵循z-index屬性，數值越大越靠上
// div1的z-index為2，canvas的z-index為1，所以div會覆蓋canvas
</script>
</code>

在上面的案例中，我們定義了一個div元素和一個canvas元素，并分別設置了它們的z-index屬性。div元素的z-index為2，canvas元素的z-index為1，所以div元素會覆蓋在canvas元素之上。

<案例二：改變層級>

<code>
<div id="div2" style="position: absolute; z-index: 1;">
This is another div element.
</div>
<br>
    <canvas id="canvas2" style="position: absolute; z-index: 1;">
Your browser does not support HTML5 canvas.
</canvas>
<br>
    <script>
// 如果兩個元素的層級相同，后面的元素會覆蓋在前面的元素上
// 在這個案例中，div2和canvas2的層級相同，但是因為div2在canvas2后面定義，所以div2會覆蓋canvas2
</script>
</code>

在第二個案例中，我們同樣定義了一個div元素和一個canvas元素，并給它們設置了相同的z-index屬性。然而，因為div元素在代碼中定義在canvas元素之后，所以div元素會覆蓋在canvas元素之上。

綜上所述，通過設置z-index屬性，我們可以改變canvas和div元素的層級關系，從而控制它們在頁面上的覆蓋順序。需要注意的是，在不同的元素之間設置不同的z-index值可以改變它們的層級關系，但是在相同元素間設置不同的z-index值是無效的。

參考文章： - https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context - https://www.w3schools.com/cssref/pr_pos_z-index.asp