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>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVhbmppZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="500" height="500" alt="" />

图1-1

说明：上面明明有两个div——son1 div和son2 div，可为什么仅仅显示了son1 div？呵呵呵，事实上这个问题非常easy，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>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVhbmppZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="500" height="500" alt="" />

图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终结者的更多相关文章

运用<div>布局页面练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
关于Cewu Lu等的《Combining Sketch and Tone for Pencil Drawing Production》一文铅笔画算法的理解和笔录。
相关论文的链接:Combining Sketch and Tone for Pencil Drawing Production 第一次看<Combining Sketch and Tone f ...
四种比较简单的图像显著性区域特征提取方法原理及实现-----> AC/HC/LC/FT。
laviewpbt 2014.8.4 编辑 Email:laviewpbt@sina.com QQ:33184777 最近闲来蛋痛,看了一些显著性检测的文章,只是简单的看看,并没有深入的研究,以 ...
C# 金钱小写转大写的算法
调用 ConvertMoney的ConvertMoneyToWords(decimal money)方法即可 using System; using System.Collections.Generi ...
【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果
最近看到一个非常有趣的益智小游戏,是一个盗贼进入房子偷东西的, 其实这种游戏市面上已经很多了,吸引我的是那个类似手电筒的效果, 主角走到哪里,光就到哪里,被挡住的地方还有阴影.有点类似策略游戏里的战争 ...
来看看css3中的box-shadow
不谈IE,只谈谈box-shadow的具体使用方法语法: E {box-shadow: <length> <length> <length>?<length ...
img和css背景的选择
在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适: 1.如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人), ...
深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
2016 年青岛网络赛---Family View(AC自动机)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5880 Problem Description Steam is a digital distribut ...
你知道吗？Web的26项基本概念和技术
这是我在网上看到一篇不错的文章,拿出来与大家分享一下:希望有所帮助作者: 小鱼来源: 前端里发布时间: 2014-08-01 22:56 阅读: 10477 次推荐: 51 原文链 ...

随机推荐

使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（三）——使用Flask-Login库实现登录功能
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化使用 Flask 框架写用 ...
Guava学习笔记之Maps(1)：Maps.uniqueIndex(Iterable, Function)
Guava官方文档 https://github.com/google/guava/wiki/CollectionUtilitiesExplained 官方文档这样描述: [`Maps.uniqueI ...
mybatis必知必会二
关联: 嵌套查询:通过执行另外一个 SQL 映射语句来返回预期的复杂类型. 嵌套结果:使用嵌套结果映射来处理重复的联合结果的子集.首先,然让我们来查看这个元素的属性.所有的你都会看到,它和普通的只由 ...
最短路问题（dijkstral 算法）（优化待续）
迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中最短路径问题.迪杰斯特拉算法主要特点是以起始点为中心向 ...
docker login 报错 Error response from daemon: Get https://registry-1.docker.io/v2/: unauthorized: incorrect username or password
按照网上说的说法,造成这个现象有很多原因,大家可以多尝试一下,下面贴出解决我问题的方法: docker账户分为两个部分,一个是email,一个是dockerID,使用docker login登陆时要使 ...
mac mamp环境 PHP命令行反应缓慢解决
在hosts增加下面两项即可. 原因:尝试执行DNS查找本地计算机的主机名的原因 raydeMacBook-Pro.local 就是你的MAC名称 127.0.0.1 raydeMacBook-P ...
如何使Wpf浏览器应用程序被完全信任运行
原文地址链接:http://blogs.microsoft.co.il/maxim/2008/03/05/how-to-run-wpf-xbap-as-full-trust-application/ ...
K：大数加法
相关介绍: 在java中,整数是有最大上限的.所谓大数是指超过整数最大上限的数,例如18 452 543 389 943 209 789 324 233和8 123 534 323 432 323 ...
几个css3动画库
Hover.css 查看演示: http://ianlunn.github.io/Hover/ github地址: https://github.com/IanLunn/Hover Animate.c ...
在弹框中获取foreach中遍历的id值，并传递给地址栏（方法2）
1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...

z-index终结者

z-index终结者的更多相关文章

随机推荐

热门专题