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>

图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中增添了“position:absolute”样式属性和属性值;

总结:

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

二、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分下载实例资源

HTML CSS——z-index终结者,布布扣,bubuko.com

时间: 2024-10-02 10:32:54

HTML CSS——z-index终结者的相关文章

HTML CSS——position学习终结者(二)

在博客<HTML CSS--position学习终结者(一)>中我们认识到如果某一absolute作用的元素的父对象(或曾祖父,只要是父级对象)设置了position属性且position的属性值为absolute.relative或者fixed,那么这个子元素会参照离它(指子元素)最近的且position的属性值为absolute.relative或者fixed的父元素进行定位,子元素的定位点为父元素的左上角,学习过padding的人可能会这样想:这个时候如果父元素设置了padding样式,

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

CSS中的层叠上下文和层叠顺序

copy @ from http://www.zhangxinxu.com 四.务必牢记的层叠准则 下面这两个是层叠领域的黄金准则.当元素发生层叠的时候,其覆盖关系遵循下面2个准则: 谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个.通俗讲就是官大的压死官小的. 后来居上:当元素的层叠水平一致.层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素. 在CSS和HTML领域,只要元素发生了重叠,都离不开上面这两个

css position(定位)

一个定位元素(positioned element)是其计算位置属性为 relative, absolute, fixed 或 sticky 的一个元素. 相对定位元素(relatively positioned element)是计算后位置属性为 relative的元素. 绝对定位元素(absolutely positioned element)是计算后位置属性为 absolute 或 fixed 的元素. 粘性定位元素(stickily positioned element)是计算后位置属性

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

CSS定位(postion)和移动(float)

5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. 有四种不同的定位方法. Static 定位HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, left, right影响. Fixed

CSS:CSS Positioning(定位)

ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值: static relative fixed absolute 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中. 静态定位

[转]深入理解CSS中的层叠上下文和层叠顺序

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显

雷林鹏分享:CSS Position(定位)

position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. static 定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, right影响. 实例 div.static { po

css position定位

CSS Position(定位) position 属性指定了元素的定位类型.直线模组价格 position 属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. static 定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, righ