CSS（層疊樣式表）是一種用于描述網(wǎng)頁上元素樣式的語言。在網(wǎng)頁設(shè)計中，我們經(jīng)常會用到div元素來劃分網(wǎng)頁區(qū)域。而CSS的div顯示層級則是指通過CSS樣式設(shè)置來調(diào)整不同div元素在頁面上的顯示優(yōu)先級。下面，以幾個代碼案例為例詳細(xì)解釋說明CSS div顯示層級。
案例一：使用z-index屬性設(shè)置層級

CSS中的z-index屬性可以用來設(shè)置元素的顯示層級，數(shù)值越大，顯示在頁面上的層級越高。

<style>
.container {
position: relative;
}
.div1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
z-index: 1;
}
.div2 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
z-index: 2;
}
</style>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>

在上述代碼中，div2的z-index屬性值為2，大于div1的z-index屬性值1，所以div2會顯示在div1之上。

案例二：使用position屬性和top、left等屬性設(shè)置層級

除了z-index屬性，使用position屬性配合top、left等屬性也可以調(diào)整div元素在頁面上的顯示層級。

<style>
.div1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.div2 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 10px;
left: 10px;
}
</style>
<div class="div1">
<div class="div2"></div>
</div>

在上述代碼中，div2的position屬性值為absolute，并設(shè)置了top和left屬性，使其相對于div1元素的位置發(fā)生了偏移，所以div2會顯示在div1之上。

案例三：使用float屬性設(shè)置層級

使用float屬性可以使div元素在頁面上浮動顯示，從而影響其在頁面上的顯示層級。

<style>
.div1 {
width: 200px;
height: 200px;
background-color: red;
}
.div2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
<div class="div1"></div>
<div class="div2"></div>

在上述代碼中，div2的float屬性值為left，使其浮動到div1元素的左側(cè)，所以div2會顯示在div1之上。

起來，通過設(shè)置z-index屬性、position屬性和float屬性可以調(diào)整div元素在頁面上的顯示層級。在實(shí)際網(wǎng)頁設(shè)計中，我們可以根據(jù)需要合理運(yùn)用這些屬性來實(shí)現(xiàn)不同元素之間的層級關(guān)系，從而創(chuàng)造出豐富多樣的頁面布局效果。