位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS Z軸索引的優(yōu)先級設置

提問人:劉團圓發(fā)布時間:2020-11-18

    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>

image.png

繼續(xù)查找其他問題的答案?

相關視頻回答
回復(0)
返回頂部