CSS z-index
2018-12-11 本文已影响6人
roy_pub
当对多个元素同时设置定位时，定位元素可能会发生重叠。想要调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，取值可为正整数、负数和0。
- z-index的默认值为0，取值越大，定位元素在层叠元素中越居上
- 如果取值相同，根据书写顺序，后来居上
- 取值不能加单位
- 只有相对定位，绝对定位，固定定位有此属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.green {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
z-index: 2;
top: 50px;
left: 50px;
}
.blue {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>
