css3中的z-index

「爱情、让人受尽委屈。」 2022-05-21 10:22 103阅读 0赞

元素的层叠黄金准则：

1）、谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个

2）】后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素

定位元素与传统层叠上下文

对于position值为relative/absolute以及firfox/IE浏览器（不包括Chrome浏览器）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文

看两个例子：

例2:

![70][]    ![70 1][]

例1  效果图                                                      例2 效果图

细心的你有没有发现，上面的两个例子中，不同之处就是：第一个例子父级z-index值为auto，第二个例子父级z-index值为0，仅此不同，然后一个是1在上，一个是2在上，为什么呢？别着急，往下看哈

其实单纯从层叠水平上看，实际上z-index:auto和z-index:0是可以看成一样的，注意我说的是单纯从层叠水平上看，实际上两者在层叠上下文领域有着根本性的差异。

z-index:auto所在的div元素是一个普通定位元素，于是他们的子级层叠比较就不受父级影响，两者直接遵循我们上面提到的层叠准则：“谁大谁上”，所以第一个元素的子级z-index:2比第二个元素的子级z-index:1大，所以第一个div就在上面显示

注意：当我们为元素设置了定位（除值为static外），但没有为其设置z-index时，就默认z-index值为auto

而z-index一旦变成数值，哪怕是0，就会创建一个层叠上下文，此时层叠规则就发生了变化，层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。所以两个子级的div层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。这里由于外面两个div元素都是z-index:0;两者的层叠顺序一样大，此时遵循层叠原则中的“后来居上”，根据在DOM文档流中的位置决定谁在上面，于是2就在上面了，所以此时子元素的z-index没有起作用哈

有时我们在网页重构的时候会发现z-index嵌套错乱，这时要看看是不是受父级的层叠上下文元素干扰了，可能就豁然开朗了

注意的一点是：IE6/IE7浏览器，z-index:auto的定位元素也会创建层叠上下文，就是和z-index:0效果一样

position:fixed;，在过去和position:absolute/relative一样，都是需要z-index为数值的时候才会创建层叠上下文，但Chrome等webkit内核浏览器下，position:fixed;元素天然层叠上下文元素，无需z-index为数值

下面我们聊一下关于z-index的一些理解误区

一般我们会说：z-index属性只有和定位元素（position不为static的元素）一起使用的时候，才起作用，那首先这种说法，在css3世界中是站不住脚的哈，因为flex盒子的子元素也可以设置z-index属性

z-index数值越大层级越高：在多数情况下是成立的，但要注意我们上面提到的：层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中，也就是说，如果父元素也是在层叠上下文中，那么他们的子元素的层叠顺序不会越过父级，通俗一点说：

如果A的父级的层叠顺序比B的父级层叠顺序要高，那么即便B的z-index为9999，A的z-index为0，A依然是在B的上面，因为A的父级比B的父级层叠顺序要高

好了，今天就先聊这么多，明天再聊聊z-index为负值的情况哈

参考书籍：张鑫旭的《css世界》，在查阅的时候还看到了一个不错的博客，这里附上链接：[z-index][]

[70]: https://img-blog.csdn.net/20180705210003819?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220521/147be7d03093485e85fad84259e29892.png
[z-index]: https://www.cnblogs.com/ForEvErNoME/p/3373641.html