HTML CSS——z-index终结者
z-index属性用来设置元素的堆叠顺序，使用z-index有一个大的前提：z-index所作用元素的样式列表中必须有position属性并且属性值为absolute、relative或fixed中的一个，否则z-index无效。z-index的属性值有三个，分别为number、auto和inherit，下面通过例子来说明其具体的用法：
一、number：
代码1-1如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.parent{
width:300px;
height:300px;
background-color:yellow;
}
.son1{
position:absolute;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
说明：上面明明有两个div——son1 div和son2
div，可为什么只显示了son1 div？呵呵呵，其实这个问题很简单，son1 div的position为absolute，这一属性所设定的absolute属性值将会使son1 div脱离文档流，其原来的位置将由其它非脱离文档流的元素占据（这里是son2 div），尽管这样，可是为什么看不到son2 div呢，呵呵呵，这是因为son1 div的样式列表没有设定能够使其发生偏移的样式属性（诸如top、right、bottom和left属性）并且son1 div和son2 div大小相同，son2 div被son1 div挡住了（很通俗的，知道“挡住”是什么意思吧
），所以你只看到了son1 div并没有看到son2 div。
代码1-2如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.parent{
width:300px;
height:300px;
background-color:yellow;
}
.son1{
position:absolute;
z-index:-1;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
总结：
①、比对代码1-1和代码1-2，比对图1-1和图1-2，我们可以很好的理解z-index的作用——设置元素的堆叠顺序：由于son1 div设置了“z-index:-1;”样式而使得son1 div被son2 div所覆盖，所以你看的只是son2 div；
②、呵呵呵，当你第一眼看到“z-index:-1;”时你是不是有这样的疑问：如果把-1修改的大一些或小一些会怎么样呢？答案是z-index的属性值越大，则被层叠在越上面，越小，则被层叠在越里面。
③、你是否怀疑过（或思考过）这样一个问题：为什么把设置元素堆叠顺序的属性命名为z-index?可能你会想：这傻逼吃饱没事儿撑的吧——W3C组织就是这样规定的，我们就这样用就行了呗，想那么多干啥；呵呵呵，首先今早没吃饭，其次了解这一名字的含义对了解到底什么是堆叠顺序大有裨益，那么到底这一属性有什么含义呢：想到z字母你联想到x、y和z这三个字母了吗？如果想到了，很好，这说明你高中数学知识还没忘，由x、y和z你是否想到了高中的立体几何？想一下z轴，呵呵呵，磨叽了这么长，现在切入正题：我们知道电脑显示器是二维的（只有x轴和y轴），而网页要显示堆叠顺序，就需要模拟z轴以形成三维的视觉效果，这就是将其命名为z-index的原因所在。关于这一点请看下面代码及其效果截图：
代码1-3如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
}
.square1{
position:absolute;
z-index:-2;
width:500px;
height:500px;
background-color:red;
}
.square2{
position:absolute;
z-index:-1;
width:400px;
height:400px;
background-color:gray;
left:50px;
top:50px;
}
.square3{
position:absolute;
z-index:0;
width:300px;
height:300px;
background-color:blue;
left:100px;
top:100px;
}
.square4{
position:absolute;
z-index:1;
width:200px;
height:200px;
background-color:green;
left:150px;
top:150px;
}
.square5{
position:absolute;
z-index:2;
width:100px;
height:100px;
background-color:yellow;
left:200px;
top:200px;
}
</style>
</head>
<body>
<div class="square1">square1</div>
<div class="square2">square2</div>
<div class="square3">square3</div>
<div class="square4">square4</div>
<div class="square5">square5</div>
</body>
</html>
二、auto：
代码2-1如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.div_1{
}
.div_1_1{
position:absolute;
z-index:-1;
width:70px;
height:70px;
background-color:green;
}
.div_2{
position:absolute;
z-index:1;
width:70px;
height:70px;
background-color:red;
}
</style>
</head>
<body>
<div class="div_1">
<div class="div_1_1">div_1_1</div>
</div>
<div class="div_2">div_2</div>
</body>
</html>
说明：从代码2-1可以看到div_1_1 div和div_2 div的样式表均含有“position:absolute”样式，div_1_1 div和div_2 div两个div大小相同。但由于div_2 div的z-index比div_1_1 div的z-index值大，所以div_1_1 div被div_2 div所覆盖，只显示div_2 div；
代码2-2如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.div_1{
position:absolute;
z-index:2;
}
.div_1_1{
position:absolute;
z-index:auto;
width:70px;
height:70px;
background-color:green;
}
.div_2{
position:absolute;
z-index:1;
width:70px;
height:70px;
background-color:red;
}
</style>
</head>
<body>
<div class="div_1">
<div class="div_1_1">div_1_1</div>
</div>
<div class="div_2">div_2</div>
</body>
</html>
说明：代码2-1和代码2-2相比有如下改动：代码2-2中div_1_1 div父元素添加了样式——“position:absolute;z-index:2;”，并且代码2-2中div_1_1 div 元素z-index的属性值由-1改为了auto；
总结：
①、对比代码2-1和代码2-2，对比图2-1和图2-2不难总结出这样的结论：使用z-index属性并且属性值为auto的元素堆叠顺序与父元素相等；
②、代码2-2中div_1_1 div父元素添加了样式——“position:absolute;z-index:2;”，那么可不可以把“position:absolute;z-index:2;”改为“z-index:2;”呢？如果把div_1_1 div父元素样式全部去掉有会出现什么结果呢？带着这个疑问我们来看如下两个例子：
代码2-3如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.div_1{
z-index:2;
}
.div_1_1{
position:absolute;
z-index:auto;
width:100px;
height:100px;
background-color:green;
}
.div_2{
position:absolute;
z-index:1;
width:70px;
height:70px;
background-color:red;
}
.div_3{
position:absolute;
z-index:-1;
width:140px;
height:140px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="div_1">
<div class="div_1_1">div_1_1</div>
</div>
<div class="div_2">div_2</div>
<div class="div_3">div_3</div>
</body>
</html>
总结：观察代码2-3可以发现div_1_1 div父元素样式去掉了“position:absolute;”只保留了“z-index:2;”，但是观察图2-3我们是不是可以得出这样的结论呢：如果某元素使用了z-index并且其属性值为auto，其父元素只使用了z-index并没有使用position属性（或者position属性的属性值为static），那么子元素的z-index实际属性值为0；个人认为这是对的：上图中黄色的z-index为-1，绿色的z-index为给的是auto，红色的z-index为1，从图中层次可以看到绿色的z-index的值应该介于-1和1之间（否则绿色部分不会介于黄色和红色之间）；
代码2-4如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.div_1{
}
.div_1_1{
position:absolute;
z-index:auto;
width:100px;
height:100px;
background-color:green;
}
.div_2{
position:absolute;
z-index:1;
width:70px;
height:70px;
background-color:red;
}
.div_3{
position:absolute;
z-index:-1;
width:140px;
height:140px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="div_1">
<div class="div_1_1">div_1_1</div>
</div>
<div class="div_2">div_2</div>
<div class="div_3">div_3</div>
</body>
</html>
总结：观察代码2-3可以发现div_1_1 div父元素样式为空，但是观察图2-4我们可以得出和图2-3一样的结论，由此可见如果把代码2-2中div_1_1 div父元素样式改为“z-index:2;”或干脆全部去掉，那么其使用z-index属性并且属性值为auto的子元素的z-index的实际属性值为0；
三、inherit：该属性作用的元素继承父元素z-index的属性值，由于该属性在任何的版本的 Internet Explorer （包括 IE8）都不支持，所以可以忽略它。
【0分下载实例资源】
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
