z-index堆叠上下文问题

李恒道

前言

今天突然发现z-index有一个非常有意思的特性
就是z-index不仅仅是会在空间上进行折叠
还可以通过特定的属性来控制生成自己的空间
让子元素在其内进行堆叠上下文的排序

Demo

首先z-index不为auto
然后如果大于0的时候时候
在元素上方
如果小于0的时候
在元素下方
然后我们开始写例子
我们首先创建三个div

其中红色和黄色是absolute
蓝色是红色的子元素
我们将红色的div不设定z-index
蓝色的z-index设为9999
红色设为3，这个时候可以看到蓝色压过了黄色
这时候是没有触发堆叠上下文的情况
那我们该如何触发堆叠上下文？
使用opcaticy，或者对蓝色div设置一个z-index都可以触发
规则是子元素需要继承某些特定的属性以保证渲染正常
或当元素是absolute时z-index不为auto时触发堆叠上下文
除此以外还有其他几种触发方式，但是不常用，有兴趣可以查查

触发

那么我们现在使用opcaticy大家可以再看看效果
我什么也没做
只对红色加了一个opcaticy为0.99

这是因为当设置了opcaticy的时候，红色产生了一个自身堆叠上下文
在这个时候自身的堆叠上下文无论z-index多大
都不应该影响其他上下文的顺序大小
顺便一提
当我们在默认的时候是使用的body的堆叠上下文
那么堆叠上下文就简单了解到这里了~