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>

图1-1

说明：上面明明有两个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-2

说明：代码1-1和代码1-2相比只是son1 div的样式列表中增添了“z-index:-1;”样式属性和属性值；

总结：

①、比对代码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>

图1-3

说明：观察代码1-3可知square1、square2、square3、square4和square5的z-index是从小变大的，呵呵呵，当你看到这句话时你是否有这样两点疑问：

a、如果他们的z-index相等又会怎么样呢？你可以将上面代码拷贝一下，将z-index属性值设置成一样的，然后运行一下，你会看到其效果和图1-3是一样的；

b、如果我把class为“square5”的div和class为“square4”的div换一下位置又会出现什么情形呢？这时“square5”的div会出现在“square4”的div后面，“square3”的div的前面。

透过a和b两点我们可以得出这样的结论：同级别的多个元素，如果其样式表中position属性的属性值为absolute并且z-index属性的属性值相等，那么其堆叠顺序为自上而下，其实到这里我始终有这样一个认识（但不知道对不对）——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

说明：从代码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-2

说明：代码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

总结：观察代码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-4

总结：观察代码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分下载实例资源】

z-index终结者相关推荐

HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
js怎么设置z index.html,HTML5 Canvas set z-index
j0kEli Stone提出了一个问题:HTML5 Canvas set z-index,或许与您遇到的问题类似. 回答者markE给出了该问题的处理方式: Yes..kind of yes. You ...
html设置z index.html,CSS中z-index属性的使用方法和示例介绍
怎么使用CSS z-index属性?下面本篇文章就来给大家浅谈一下CSS z-index属性的使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. z-index属性介绍只有设置 ...
mysql 索引合并_MySQL 索引合并（Index Merge）优化
本文问题什么是Index Merge?Index Merge的限制有哪些? 如何查看语句是否使用了Index Merger? Index Merge有哪几种?分别适用于那些情景? 如何控制优化器是否 ...
css索引_CSS中的Z索引：它是什么以及它做什么
css索引什么是Z索引? (What is a Z Index?) Z Index (z-index) is a CSS property that defines the order of ove ...
附录3：Pandas实例记录
Pandas广泛用于数据分析,有两种数据结构:Series和DataFrame,Pandas的操作以列为核心,部分原因在于机器学习的特征以列保存 #Pandas实例记录 #基本数据结构:Series和 ...
[转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
matlab 将矩阵中的0置为Inf（邻接矩阵）
矩阵中的0置为Inf(邻接矩阵) ind=find(x==0); x(ind)=inf; index=isnan(z); z(index)=0; 在Matlab中,有一个logical数据类型,和C+ ...
python窗口程序-python操作Windows窗口程序
如果你想看更多舒适的布局和守时,有干货推动现场每天8点.定期获得数据接口和数据写入Excel表.Excel需要使用其他程序和需要打开.Pywin32处理是一个32位整数,用于标记对象在windows中 ...
Centos入门-3
1.逻辑卷LVM实现原理:|--实现传统硬盘分区不能解决容量拉伸的问题|--底层是把物理硬盘分成PE进行管理.|-- 物理硬盘--> PV--> VG--> LV {见图}*.创建使 ...

z-index终结者

z-index终结者相关推荐

最新文章

热门文章