CSS中的div是最常用的HTML元素之一，它被用來表示網頁中的塊級元素。在CSS中，我們可以通過設置不同的層級來控制div的顯示順序和疊加效果。這是非常有用的，尤其是在創建復雜的布局和覆蓋元素時。本文將詳細介紹CSS中div的層級概念，并通過幾個實例來說明。
層級是CSS中控制元素堆疊順序的概念。每個HTML元素在文檔流中都有一個默認層級，通常按照它們在HTML源代碼中的順序在頁面上進行顯示。但是，在CSS中我們可以通過添加z-index屬性來改變層級。
例如，假設有兩個div元素分別為div1和div2，并且它們的HTML代碼如下所示：

<div class="div1">This is div 1</div>
<div class="div2">This is div 2</div>

如果你在CSS中設置了以下樣式：

.div1 {
z-index: 1;
}
.div2 {
z-index: 2;
}

那么div2將在頁面上顯示在div1上方，因為它的層級較高。
除了使用數字值來表示層級，我們還可以使用負數值來指定層級。負數的層級值會使元素被放置在默認層級的下面。
讓我們看一個實際的案例。假設我們有一個包含圖片和文字的父級div元素，并有兩個子級div元素用于定位圖片和文字。我們希望文字在圖片的上方顯示。以下是HTML和CSS代碼：

<div class="container">
<div class="image"></div>
<div class="text">This is some text</div>
</div>

.container {
position: relative;
}
.image {
position: absolute;
z-index: -1;
}
.text {
position: relative;
z-index: 1;
}

在這個例子中，父級div元素.container使用了position: relative;來創建一個相對定位的容器。子級div元素.image使用了position: absolute;來將其定位為容器的背景，并使用了z-index: -1;來表示它的層級較低。子級div元素.text使用了position: relative;來相對定位，并使用了z-index: 1;來表示它的層級較高。
通過這種設置，文字將位于圖片的上方顯示，并且容器中的其他內容不會受到影響。
還有一種情況是，如果我們希望在頁面的某個區域上方創建一個彈出窗口或下拉菜單，我們可以使用較高的層級來實現實現這一點。以下是一個示例：

<div class="content">
<p>This is some content</p>
<div class="popup">
<p>This is a popup</p>
</div>
</div>

.content {
position: relative;
}
.popup {
position: absolute;
top: 20px;
left: 20px;
z-index: 999;
}

在這個例子中，父級div元素.content使用了position: relative;來創建一個相對定位的容器。子級div元素.popup使用了position: absolute;來將其定位，并使用了z-index: 999;來表示它的層級較高。
通過這種設置，彈出窗口將出現在頁面內容上方，并且不會干擾頁面其他部分的布局。
：CSS中的div層級屬性使我們能夠控制元素的顯示順序和疊加效果。使用合適的層級設置，我們可以創建復雜的布局，實現元素的覆蓋和彈出效果。通過使用z-index屬性，我們可以輕松地改變div元素的層級，并決定它們在頁面上的顯示堆疊順序。
希望本文對你了解CSS中div的層級概念有所幫助，并且能夠在實際項目中靈活運用。