CSS Z軸索引的優(yōu)先級設置
z-index屬性設置元素的堆疊順序,擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
該屬性設置一個定位元素沿Z軸的位置,Z軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù),則表示離用戶更近。如果為負數(shù),則表示離用戶更遠。
z-index屬性的值可以是以下幾種:
?auto:默認,堆fi順序與父元素相等。
?number:設置元素的堆疊順序。
?inherit:規(guī)定應該從父元素繼承z-index屬性的值。
下面通過一個案例來幫助大家理解z-index屬性。
【例題】使用z-index屬性
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height:2000px;
}
div{
width: 200px;
height: 200px;
}
.d1{
background: pink;
}
.d2{
background: lightblue;
position:absolute;
top:100px;
left:100px;
z-index: -1;
}
.d3{
background: yellowgreen;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
點擊加載更多評論>>