編碼的世界 / 優質文選 / 生涯
一天搞定CSS：層級(z-index)--18
2022年3月28日
-
因為定位的出現，所以有了元素重疊的情況，此時就出現了顯示誰的情況。在多層布局時，容易出現這種情況定位position見：http://blog.csdn.net/baidu_37107022/article/details/716421471.默認層級規則
但層級規則可以通過z-index來設置1.在正常情況下，層級的大小由順序決定，後面的元素要比前面的元素的層級要高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background: red;
color: #fff;
}
.div2{
width: 150px;
background: green;
margin-top: -50px;
}
span{
background: blue;
color: #fff;
width: 100px;
height: 100px;
display: block;
margin-top: -50px;
}
</style>
</head>
<body>
<!
在正常情況下，層級的大小由順序決定，後面的元素要比前面的元素的層級要高
>
<div>kaivon1</div>
<div class="div2">kaivon2</div>
<span>span</span>
</body>
</html>
效果圖
2.有定位元素的層級要比沒有定位元素層級要高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background: red;
color: #fff;
}
.div1{
position: relative;
}
.div2{
width: 150px;
background: green;
margin-top: -50px;
}
/*span{
background: blue;
color: #fff;
width: 100px;
height: 100px;
display: block;
margin-top: -50px;
}*/
</style>
</head>
<body>
<!
在正常情況下，層級的大小由順序決定，後面的元素要比前面的元素的層級要高
有定位元素的層級要比沒有定位元素層級要高
>
<div class="div1">kaivon1</div>
<div class="div2">kaivon2</div>
<!<span>span</span>>
</body>
</html>
2.層級(z-index)層級由屬性z-index來控制： 它的值是一個數字，數字越大層級越高（在同一個層裏）
代碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background: red;
color: #fff;
position: relative;
}
.div1{
z-index: 2;
}
.div2{
width: 150px;
background: green;
margin-top: -50px;
z-index: 1;
}
</style>
</head>
<body>
<!
在正常情況下，層級的大小由順序決定，後面的元素要比前面的元素的層級要高
有定位元素的層級要比沒有定位元素層級要高
在都有定位的情況下，層級還是取決於書寫順序
z-index 層級
它的值是一個數字，數字越大層級越高（在同一個層裏）
>
<div class="div1">kaivon1</div>
<div class="div2">kaivon2</div>
</body>
</html>
熱門文章
