CSS教程
CSS进阶

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>
输出
CSS z-index
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4