CSS学习笔记10——z-index属性
z-index属性
z-index 属性指定一个元素的堆叠顺序。
比如说，两个盒子之间有重叠，那么是盒子1覆盖盒子2，还是盒子2覆盖盒子1，取决于两个盒子的z-index属性值的大小，属性值大的会覆盖属性值小的。
使用示例：
z-index: 10;
代码演示
首先产生三个有重叠的盒子，不指定z-index值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index属性</title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background: green;
float: left;
position: relative;
}
.b2{
width: 100px;
height: 100px;
background: red;
float: left;
position: relative;
top: 50px;
left: -50px;
}
.b3{
width: 100px;
height: 100px;
background: blue;
float: left;
position: relative;
top: 100px;
left: -100px;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</body>
</html>
显示效果如下：
可见，默认后面的盒子会覆盖前面的，当我们为每个盒子指定z-index值时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index属性</title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background: green;
float: left;
position: relative;
z-index: 10;
}
.b2{
width: 100px;
height: 100px;
background: red;
float: left;
position: relative;
top: 50px;
left: -50px;
z-index: 3;
}
.b3{
width: 100px;
height: 100px;
background: blue;
float: left;
position: relative;
top: 100px;
left: -100px;
z-index: 6;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</body>
</html>
显示效果为：
由于我们将红色盒子的z-index设为三个盒子中的最小，因此，当有重叠部分时，其他盒子会堆叠在红色盒子上。
注意：IE浏览器不支持z-index属性