这些文字是对上篇文章的一点补充,没有什么需要特别说明的,只是把一些“概念常识”整理一下。
仍然先做一个和上篇文章中纸牌式的效果或仍沿用那个效果:
[演示地址: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。