在我以前的认知里，在一些定位元素中（position为absolute、fixed或者relative），z-index越大就显示在越前面。比如下面的例子：
wrap1、wrap2、wrap3和box的position均为absolute，其中box为wrap1的子元素，z-index为10。
<div class="wrap wrap1"><div class="box"></div></div>
<div class="wrap wrap2"></div>
<div class="wrap wrap3">.wrap{ position: absolute;}
.box{z-index: 1; }接下来我们给wrap1添加opacity属性；
.wrap1{opacity: .99;}结果如下图所示，box不再显示在最上面，而是被wrap2所遮挡。
.wrap1{opacity: .99;}所有元素均为absolute定位，box的z-index为10，为什么没有显示在最上面。这里就涉及到一个“堆叠上下文”，下文将堆叠上下文简称为层。
每一个层都有唯一的根节点。当一个元素创建一个层，那么它的所有子元素都会受到父元素的堆叠顺序影响。意味着如果一个元素位于一个最低位置的层，那你z-index设置得再大，它也不会出现在其它层元素的上面。
哪些情况会产生新的层：
- 当一个元素位于HTML文档的最外层（<html>元素）
- 当一个元素被定位了并且拥有一个z-index值（不为auto）
- 当一个元素被设置了opacity，transforms, filters, css-regions, paged media等属性。
最初只有box符合产生一个新层的条件，同时它的z-index最大，因此它显示在最上面。但是当我们将wrap1的opacity设置为0.99的时候，就是产生了一个新的层，这个层的z-index和wrap2、wrap3的z-index相同。按照元素书写顺序，wrap1应该显示在最下面。这个时候虽然box的z-index的值最大，但是只能在wrap1产生的层起作用。对wrap1之外的元素没有影响。
下次当你使用z-index达不到效果时候，记得检查一下它的堆叠上下文环境哦^V^。demo戳这里：http://runjs.cn/detail/tlwoy4ew
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-10 12:11:35