z-index属性用于在z轴上(即在屏幕内或屏幕外)移动元素。如果元素彼此重叠,则用于定义元素的顺序。
用法:
z-index:auto|number|initial|inherit;
属性值:
- auto:堆栈顺序等于父顺序(默认)。
- number:堆叠顺序取决于数量。
- initial:将属性设置为其默认值。
- inherit:从父元素继承属性。
范例1:
<!DOCTYPE html>
<html>
<head>
<title>
z-index Property
</title>
<style>
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
h1,
p {
background-color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geek.png"
width="400" height="150">
<p>This example shows the use of z-index property.</p>
</body>
</html>
输出:
范例2:
<!DOCTYPE html>
<html>
<head>
<title>
z-index Property
</title>
<style>
img {
position:absolute;
left:0px;
top:0px;
z-index:+1;
}
h1,
p {
background-color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geek.png"
width="400" height="150">
<p>This example shows the use of z-index property.</p>
</body>
</html>
输出:
在示例1中,z-index设置为-1,因此,图像出现在文本后面,而在示例2中,当z-index设置为+1时,图像隐藏了文本。
支持的浏览器:下面列出了z-index属性支持的浏览器:
- 谷歌浏览器1.0
- 边12.0
- Firefox 1.0
- Opera 4.0
- 苹果Safari 1.0
相关用法
- HTML Style zIndex用法及代码示例
- CSS transition-property用法及代码示例
- CSS nav-down用法及代码示例
- CSS nav-up用法及代码示例
- CSS right属性用法及代码示例
- CSS all属性用法及代码示例
- CSS nav-right用法及代码示例
- CSS top属性用法及代码示例
- CSS min-height用法及代码示例
- CSS max-height用法及代码示例
- CSS fill属性用法及代码示例
- CSS columns属性用法及代码示例
- CSS box-sizing用法及代码示例
- CSS border-top用法及代码示例
- CSS flex属性用法及代码示例
注:本文由纯净天空筛选整理自AshwinGoel大神的英文原创作品 CSS | z-index Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。