在CSS开发中需要某元素覆盖在另一元素的上面，就需要用到z-index语法。z-index语法需要搭配position使用，position语法看下面这篇教程。
相关信息
CSS定位教程 position语法详解
CSS中的定位，用position语法方法，定位又分为绝对定位、相对定位和固定定位。position语法为CSS2版本，无继承性，默认值为：static。position语法语法：position：static | re...
z-index语法为CSS2版本，无继承性
z-index语法
z-index: auto | <integer>
默认值：auto
语法示例
z-index: auto; z-index: 999;
z-index值
auto：默认值。遵从其父对象的定位
<integer>：层级级别。用整数值来定义堆叠级别。可以为负值。
兼容性
全部浏览器都兼容。
实战案列
效果演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>z-index</title>
<style>
.z1,.z2,.z3 {
width: 200px;
height: 100px;
padding: 5px 10px;
color: #fff;
text-align: right;
}
.z1 {
position: absolute;
z-index: 1;
background: #000;
}
.z2 {
position: absolute;
z-index: 2;
top: 30px;
left: 30px;
background: #C00;
}
.z3 {
position: absolute;
z-index: 3;
top: 60px;
left: 60px;
background: #999;
}
</style>
</head>
<body>
<div>z-index:1</div>
<div>z-index:2</div>
<div>z-index:3</div>
</body>
</html>相关专题
css
2021-09-24 79css是前端开发中的样式语言,学好CSS可以帮助开发出漂亮的模板,css专题为您整理本站所有css相关信息,包含css模板下载,css使用教程分享和css示例代码....
- css3海浪波浪动态效果代码 [2021-10-25]
- css样式内加载其他CSS文件方法 [2021-09-27]
- HTML5+CSS3前端开发基础入门视频教程 [2021-09-16]
- HTML+CSS物业后台管理系统模板 [2021-08-15]
- HTML5/CSS3响应式Synthetica团队介绍模板 [2021-04-06]
