CSS z-index
CSS中的z-index允许我们在3维平面(即z轴)上定义视觉层次结构。它用于指定定位元素(其位置值是fixed、absolute、relative或者 sticky)。堆叠顺序表示元素在垂直于屏幕的z轴上的位置。
它定义了元素相互重叠的顺序。
语法
z-index: number|auto|inherit|initial;
可能的值
number:这表示元素的堆栈级别已设置为给定值。它允许使用负值。
auto:这意味着堆栈的顺序与父顺序相同,即默认顺序。
让我们了解一下
示例
<!DOCTYPE html>
<html>
<head>
<style>
div{
position:fixed;
width:400px;
height:300px;
z-index:20;
background-color: red;
}
img{
position:relative;
z-index:22;
}
h1{
position:relative;
z-index:28;
color:blue;
}
</style>
</head>
<body>
<div></div>
<img src="jtp.png"></img>
<h1>Welcome to lidihuo</h1>
</body>
</html>
输出
