一天搞定CSS：層級(z-index)--18
阿新 • • 發佈：2018-12-26
因為定位的出現，所以有了元素重疊的情況，此時就出現了顯示誰的情況。在多層佈局時，容易出現這種情況
1.預設層級規則
但層級規則可以通過z-index來設定
1.在正常情況下，層級的大小由順序決定，後面的元素要比前面的元素的層級要高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width 效果圖
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>