CSS之z-index

发表于 | 分类于

z-index属性

控制标签的层级关系，最底层的数值最小，最顶层的数值最大.通常当定义的CSS中有postion属性为absolute，relative或fixed时，用z-index会生效。数值越大时被层叠在最上边

1
<div style="z-index:10;">

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
	<head>
		<style>
			.z1,.z2,.z3{
				position: absolute;
				width:200px;
				height: 200px;
				padding: 5px;
				color: #5fcf3f;
				text-align: right;
			}
			.z1{
				z-index: 1;
				background: #000;
			}
			.z2{
				z-index: 2;
				background: #c00;
			}
			.z3{
				z-index: 3;
				background: #999;
			}
		</style>
	</head>
	<body>
		<div class="z1">z-indx:1</div>
		<div class="z2">z-indx:2</div>
		<div class="z3">z-indx:3</div>
	</body>
</html>

z1,z2,z3是同等大小的div层，设置z-index属性不同，此时z3的z-index值比其它层大，页面显示z3层的内容
GitHub set up