zIndex的几个小小的问题(二)

原创 2007年09月29日 09:36:00

这些文字是对上篇文章的一点补充,没有什么需要特别说明的,只是把一些“概念常识”整理一下。

仍然先做一个和上篇文章中纸牌式的效果或仍沿用那个效果:

演示地址:http://www.doyoe.com/model/xhtmlcss/style/zindex/3.htm

CSS部分:

div { position: absolute; color: #fff; width: 150px; height: 150px; border: 1px solid #ddd;}
.dy1 { top: 100px; left: 100px; background-color: #000; z-index: 1;}
.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 2;}
.dy3 { top: 160px; left: 140px; background-color: #050; z-index: 3;}

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY Css zIndex</title>
</head>
<body>
<div class="dy1">dy1</div>
<div class="dy2">dy2</div>
<div class="dy3">dy3</div>
</body>
</html>

我们试着把里面的zIndex都去掉,然后看效果,发现和之前的是一模一样的,那这意思是不是说zIndex是无意义的?这个一会再说。

CSS:

.dy1 { top: 100px; left: 100px; background-color: #000; }
.dy2 { top: 130px; left: 120px; background-color: #f00; }
.dy3 { top: 160px; left: 140px; background-color: #050; }

首先来看为什么不写zIndex也会有相同的效果。是不是在不写情况下,它们本身也具有了一个缺省的zIndex值,这个值是多少呢?

问题二:zIndex是否无存在意义?

问题三:每个元素是否都有一个zIndex初始值?这个值是多少?

要判断是否真如上面所猜,其实非常简单:

首先,给dy2加上zIndex,值任意,不过为了节省点时间,可以取小点,就1吧。

.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 1; }

刷新,效果如上图,dy2已经覆盖在dy1和dy3之上了,这说明dy1和dy3的zIndex小于1,从而也回答了第二个问题,zIndex的存在并非无意义。但即使这样,我们仍然不知道它们的zIndex值是多少。再更改dy2的zIndex为0,发现又恢复了刚开始时的效果。

.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 0; }

这是不是说明刚开始的时候dy2的zIndex值就为0呢?不急,再等等。更改dy2的zIndex值得为-1。

dy2 { top: 130px; left: 120px; background-color: #f00; z-index: -1; }

IE:FF:

此时IE中dy2已经跑到dy1和dy3的下面去了,FF中dy2则消失不见,但依然可以看出绝对是在dy1和dy3之下,因为dy1和dy3之间没有任何东西阻隔。

得出的结果是:-1<zIndex(dy2)缺省值<1,由此可见dy2的zIndex确实有个缺省值,而且这个是值就是0。因为zIndex的值为正负整数,而整数只有0才会比-1大且比1小。

这时又有一个问题:dy1,dy3的zIndex缺省值又为多少呢?从前面的测试里可以知道:当dy2的zIndex为1时,dy1,dy3都在dy2之下,由此可见zIndex(dy1)缺省值<1,zIndex(dy3)缺省值<1;当dy2的zIndex为-1时,dy1,dy3都在dy2之上,所以zIndex(dy1)缺省值>-1,zIndex(dy3)缺省值>-1;显而易见,zIndex(dy1)和zIndex(dy3)的缺省值居然也为0,也就是说zIndex(dy1)=zIndex(dy2)=zIndex(dy3)=0,这是怎么回事?既然都为0,为什么还会有层叠效果?

既然是这样,我们直接都给dy1,dy2,dy3加上一个z-index:0;

.dy1 { top: 100px; left: 100px; background-color: #000; z-index: 0;}
.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 0;}
.dy3 { top: 160px; left: 140px; background-color: #050; z-index: 0;}

果然,判断没有错,效果是一样的。那这是不是又说明,只要给它们的zIndex都赋一个相同的值,就会产生和zIndex顺次增大同样的效果?为了让结论更具说服力,需多测试几次:于是把它们的zIndex值都改为1,刷新,效果相同;改为2,刷新,效果相同;改为100,刷新,效果还是一样。

由此可见,如果我们要求一层要覆盖另一层时,只要不设置zIndex,默认的是会后面写的层盖在前写的层上,且所有的元素在无外在作用情况下,其zIndex初始值都为0

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

关于zIndex的问题

大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。 Z-index属...

Connected to an idle instance问题的小小仇恨

博主刚开始用Linux装完oracle的时候,装了一整天,开心的不行,最后使用命令时出现了Connected to an idle instance这个问题,使用startup的时候居然出现错误,网上...

遇到问题集锦(无c++基础 零起点小小小菜鸟亲身经历) 转自http://blog.csdn.net/qq592116366

收集的可能出现问题的解决方法方案

(ASP.NET)一些小小的问题集锦(2)

现又整理ASP.NET项目当中遇到的另一些问题: 1、前端若为非ASP.NET标准控件(即不是类型的),如何在.cs文件获取其数值? 解决方法:前端的控件加上name属性,.cs文件就可以通过Re...

(ASP.NET)一些小小的问题集锦(1)

在项目中遇到的一些问题和解决方法

向Access数据库插入数据时遇见的小小问题

记得前一次用Access数据库已是多年前的事了,那时还在学校混日子。 这次,由于一个实验性的小项目,再次接触Access数据库(Access2007)。在使用Access数据库的过程中,遇见一个小小...
  • tiana0
  • tiana0
  • 2013-08-18 11:39
  • 2514

poj 1704 小小的博弈问题

题目大意:在一个正整数数轴上,放着一些棋子,两人博弈,   每个人可以选取任意一个棋子,把它往左(与正方向相反)移动若干步,条件是移动过程中不能够经过另一些棋子。    问先手的必胜必败态; ...

Android-小小设置永久解决程序因为未捕获异常而异常终止的问题

转自(一) 前言 各位亲爱的午饭童鞋,是不是经常因为自己的程序中出现未层捕获的异常导致程序异常终止而痛苦不已?嗯,是的。。 但是,大家不要怕,今天给大家分享一个东东可以解决大家这种困扰,吼吼!(二)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)