今天为什么要谈这个呢？出于一个页面仔的“窥探”欲吧，也可能不是，因为这些本来就是需要知道的，只是可能没有引起太多人注意。

   当然，每个“是什么”的背后都有一个“为什么”，很多人都遇到过“设置了z-index却无用“的问题。

   z-index是干嘛的呢？——设置元素在z轴方向的层级。那么怎么用它才是正确滴捏？

   先来看正常情况下

<div class="mod"><h2>z-index</h2><div class="up">我是上层，哈哈</div><div class="down">我是底层，呜呜</div></div>css.mod{background: #BEFFFC;/*position: relative;z-index: 0;*/}up,.down{    height: 50px;    left:0;}.up{/*position: relative;*/    top:0;    background:rgb(123,213,132);/*z-index: 0;*/}.down{/*position: relative;*/    top:0;    background:rgb(102,134,232);/*    z-index: 0;*/}

   如图

   1、我们把z-index的注释去掉

   纹丝不动

   2、把up和down的定位加上

   依然纹丝不动，好吧是的，这个时候不动是正常的，它就不该动。

   3、为了能看出差别，父容器定位加上，子元素绝对定位

   如图

   第一种情况出现了，视野之中，只剩下down，到这里为止，似乎也没跟我们要说的扯上什么关系，但其实是有关系的，我们给它们设置了z-index:0;那么它们现在就是在同样的层级，当是同样层级时，后面会覆盖前面。

   再来看

   4、去掉定位，使用margin负值把down拉上去

   设置z-index，up为2，down为1，纹丝不动

   改为定位

   旧景重现，but这个时候up在down上面。这是第二个注意点，需要使用定位，才能让z-index起作用！

   那么，哪种定位呢？我们来试试一个相对一个绝对，为了看得方便，给down设置绝对，并设置top值。层级仍然不变

   如图

   如我们所愿，改一下试试，up为1，down为2

   如图

   哇偶，没问题

   5、那如果想跟父元素调调呢？

   如元素设为2，子元素设为1

   如图

   啊？！我真的没骗你，代码已经改了，可是为什么是这样，好吧难道是值不够大？那再改改，父元素改成10，还是不动，100，还是不动，使大招，999！！偶，还是不行，要吐血了。我们总是想使用暴力手段来尝试一些错误的东西，实际上是在跟自己过不去~这是为什么呢？

   因为，只要你的子元素使用了大于等于0的值，那么它就永远在父元素上面，不管父元素设置了多么大的z-index值，不信？那么是不是我们给z-index设置为0，子元素设置-1就可以了？

   看图

   看来没有想的那么简单

   去掉父元素的z-index试试

   哇，它们消失了，那么这个时候父元素的z-index值是多少呢？借助浏览器来看一下

   好的，看来父元素跟子元素不玩儿这个，它们不互相攀比~

   6、还有一点，子元素的子元素会是个什么情况呢？

   我们索性来直接给它们里面直接套一层div，然后再看会是啥情况

   尝试设置up为2，down为1，up子元素为1，down子元素为2

   好吧，我们又和哈哈见面了，可以看出，子元素设置了什么不重要，只要父元素设置了更低的z-index值，则子元素是无能为力的。

   然而这就这样结束了么？别忘了我们刚才没有给mod设置z-index值的时候，up和down是什么表现？

   是的，那么尝试不给down设置值，而只给它的子元素设置z-index，为了看得更清楚，给down定位到偏下位置。

   如下，设置为1

   老朋友又见面了。。。

   设置为2

   哇哈哈，down的子元素就酱紫完成了对父元素和up的超越，为什么同时超越了up？别忘了，down是在up之后。

   那如果把父元素的z-index清掉，只比较子元素呢，是的，它们同样遵循着”同级后在上，谁高谁在上“的原则。

   好了，说了这么多，来个小结：

   1、z-index起作用的前提是定位，这一点很重要，很多人设置z-index不起作用就是因为这个，更容易忘的是父子层叠的时候。

   2、层级值的比较，只在同级元素或者同级元素的子元素之间，父子之间不会有这样的比较。

   3、只要是子元素有着大于等于0的z-index值，那么它就在父元素之上，想在父元素之下，就设置为小于0的值，并且父元素z-index值为auto；

   除此之外，还有一点需要注意，z-index的值不会继承，还有人说z-index的默认值是0，刚才大家看到的，不够严谨。

   z-index就说到这儿。

   其他可参考 z-index

   下面简单说说zoom

   zoom这个东西大家经常看到使用，而且是对IE浏览器使用。其实是用来缩放的。

   很多文章说它是IE专有属性，其实未必。在火狐和chrome下，它依然会起作用，其他的我没测，不好发表看法。

   这里是来自caniuse的兼容表

   另外两点表现比较诡异，

   1、缩放了高度，宽度未变

   2、缩放只是看起来，而并未对元素进行真正的缩放

   上述两点也是它跟transform：scale表现的区别所在。

   可以对它设置数值，如1，也可以设置百分比，如200%。

   那它可以用来干嘛

   触发ie的hasLayout属性，清除浮动、清除margin的重叠。

   有人说css3中它就会没了，显然不是，它还新增了一些东西，比如：

   zoom-in/zoom-out

   不要误会，它们是属性值，而不是属性，它俩是用来干嘛的呢？

   是改变鼠标的形状的，比如这样

   具体可以看下张鑫旭的例子CSS3 cursor属性值zoom-in/zoom-out

   好了，由于时间紧迫，这篇文要结尾了。不知是否能够对你有所帮助，可能有所疏漏，下次有时间再来祥谈。

建议继续学习：

1. 关于z-index的那些事儿    (阅读：3482)
2. 定位元素间的Z值比较及z-index在不同浏览器下默认值的影响    (阅读：2617)
3. 小tip: IE下zoom或Matrix矩阵滤镜中心点变换实现    (阅读：2338)
4. CSS中的z-index属性    (阅读：2321)
5. 小tips: zoom和transform:scale的区别    (阅读：759)