z-index和zoom这哥俩

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

当然,每个“是什么”的背后都有一个“为什么”,很多人都遇到过“设置了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

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

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

enter image description here

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

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

欢迎关注微信公众号: 前端周末

欢迎来这里交流:152128548

灵感_idea wechat
欢迎关注我的公众号“灵感周末”,每个周末推送优质好文!
给加个蛋呗