程序博客网 > 兄弟连php学费

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

来源：互联网发布：兄弟连php学费编辑：程序博客网时间：2024/05/16 01:27

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

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

［演示地址：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。

兄弟连php学费

兄弟连php学费

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子伽罗皮肤伽罗的玩法伽罗连招伽罗皇后小心超人与伽罗伽罗历史原型伽罗攻速阈值伽罗连招技巧伽罗用什么铭文伽罗带什么技能伽罗10000暴击出装伽罗三个技能先出哪个伽罗出装铭文小心超人和伽罗伽罗带什么铭文伽罗看小心超人的身体伽罗去掉衣服的图片伽罗的攻速阈值是多少伽罗x小心超人抵在玻璃上嗯哪伽罗的完整台词伽罗的大招有什么用伽罗三个技能怎么用小心x伽罗受肉伽蓝伽蕾伽途ix5 伽途伽途t3 伽途v5 伽途ix7 伽途gt 欧曼时代金刚福田伽途v3 福田萨普福田迷迪福田伽途北京福田伽途时代领航福田伽途ix7 伽马射线