案例一
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
z-index: 1;
}
.box2 {
background-color: blue;
width: 200px;
height: 200px;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>在這個(gè)案例中，我們創(chuàng)建了兩個(gè)<div>元素，一個(gè)具有class為box1，另一個(gè)具有class為box2。我們將它們的position屬性設(shè)置為absolute，使它們可以相對于其包含的父元素進(jìn)行定位。此外，我們還分別為它們設(shè)置了不同的背景顏色，以便更好地顯示。
在box1和box2的CSS樣式中，我們使用z-index屬性來定義層級。box1的z-index為1，box2的z-index為2。這意味著box2將顯示在box1上方。當(dāng)我們在瀏覽器中運(yùn)行這段代碼時(shí)，我們將看到box2完全覆蓋在box1之上。
案例二
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
background-color: red;
width: 200px;
height: 200px;
position: relative;
z-index: 2;
}
.box2 {
background-color: blue;
width: 200px;
height: 200px;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>在這個(gè)案例中，我們使用了相對定位（position: relative）和絕對定位（position: absolute）的組合。box1被設(shè)置為相對定位，box2被設(shè)置為絕對定位，并且相對于包含它們的父元素進(jìn)行定位。
在這種情況下，盡管box2位于box1之上，但是因?yàn)閎ox1的z-index更高（2），所以box1仍然會顯示在box2之上。這是因?yàn)閎ox1和box2都處于同一個(gè)相對定位的上下文中，因此z-index的值才會生效。
案例三
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
background-color: red;
width: 200px;
height: 200px;
position: fixed;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box2 {
background-color: blue;
width: 200px;
height: 200px;
position: fixed;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>在這個(gè)案例中，我們使用了fixed定位，并將box1和box2都居中定位。由于它們的z-index不同，box2將顯示在box1上方。
來說，使用<div>標(biāo)簽和z-index屬性，我們可以通過設(shè)置元素的層級順序來實(shí)現(xiàn)復(fù)雜的布局效果。通過控制元素的層級，我們可以更好地控制元素之間的遮擋關(guān)系，從而實(shí)現(xiàn)所需的顯示效果。以上幾個(gè)代碼案例提供了一些基本的示例，但實(shí)際上，我們可以根據(jù)具體的需求和設(shè)計(jì)要求，靈活使用<div>和層級來實(shí)現(xiàn)更加復(fù)雜而吸引人的布局效果。