div 層次屬性是指在 HTML 中使用 div 元素創建網頁布局時，通過設置不同的層次屬性來控制元素的顯示順序和堆疊順序。通過設置 div 元素的層次屬性，可以使某個元素覆蓋其他元素，或者將某個元素放在其他元素之后顯示。下面將通過幾個代碼案例來詳細解釋說明。
案例一：層次屬性的基本用法 在以下 HTML 代碼中，我們使用了3個 div 元素來創建一個簡單的網頁布局，并為每個 div 元素設置了不同的層次屬性：

<div class="header" style="z-index: 3;">
<p>這是頭部</p>
</div>
<br>
<div class="content" style="z-index: 2;">
<p>這是內容</p>
</div>
<br>
<div class="footer" style="z-index: 1;">
<p>這是底部</p>
</div>

在這個例子中，頭部元素的層次屬性設置為 3（最高），內容元素的層次屬性設置為 2，底部元素的層次屬性設置為 1（最低）。因此，頭部元素將覆蓋內容元素和底部元素，而內容元素將覆蓋底部元素。
案例二：使用負值控制層次 除了使用正整數來設置層次屬性，我們還可以使用負值來控制層次。在以下 HTML 代碼中，我們為兩個 div 元素設置了不同的層次屬性：

<div class="box1" style="z-index: -1;">
<p>這是盒子 1</p>
</div>
<br>
<div class="box2" style="z-index: -2;">
<p>這是盒子 2</p>
</div>

在這個例子中，盒子 2 的層次屬性設置為 -2，而盒子 1 的層次屬性設置為 -1。由于層次屬性是負值，所以這兩個盒子將被放置在其他元素之后顯示。
案例三：使用層次屬性創建浮動效果 層次屬性還可以用來創建浮動效果。在以下 HTML 代碼中，我們使用了一個父元素和兩個子元素，并為父元素和子元素分別設置了不同的層次屬性：

<div class="container" style="position: relative;">
<div class="child" style="position: absolute; z-index: 1;">
<p>這是子元素 1</p>
</div>
<br>
    <div class="child" style="position: absolute; z-index: 2;">
<p>這是子元素 2</p>
</div>
</div>

在這個例子中，父元素的 position 設置為 relative，子元素的 position 設置為 absolute，并分別設置了不同的層次屬性。由于子元素 2 的層次屬性設置為 2（最高），子元素 2 將浮動在子元素 1 的上方。
綜上所述，div 層次屬性在 HTML 網頁布局中起著重要的作用。通過設置不同的層次屬性，可以實現元素的覆蓋、堆疊和浮動等效果，從而更好地控制網頁布局。以上是關于 div 層次屬性的詳細解釋和幾個實例的說明。希望對你有所幫助！