在我曾经的认知里，在一些定位元素中（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-11-03 22:07:25