细说opacity和层叠上下文

上篇文章《CSS半透明效果的属性和场景》最后提到了层叠上下文，在这篇文章中就说说opacity和层叠上下文。建议读者在读本篇文章之前，先仔细阅读张鑫旭大神的《深入理解CSS中的层叠上下文和层叠顺序》，并自己动手实践多种生成层叠上下文的方法。

• 探索一：使用opacity生成的层叠上下文会压盖基本元素。

如下图所示，块状元素的opacity不为1，形成了层叠上下文，无论行内元素在块状元素的前或后，都被块状元素压盖。

• 探索二：两个通过opacity创建层叠上下文的元素，层叠顺序是：出现顺序靠后的元素在上面。

如下图所示，具有相同或不同opacity的元素总是后出现的在上面。由此我们可以得知，opacity的改变不会改变层叠顺序。

• 探索三：若两个元素分别用z-index，opacity创建了层叠上下文，那么如何判断层叠顺序？

其实每个元素都有z-index，默认值为auto，z-index为0的效果等同于z-index为auto的效果。我们可以把用opacity创建的层叠上下文的z-index看作auto，所以两个层叠上下文，层叠顺序由z-index决定，z-index较大的元素在上面，z-index相同（0==auto）则出现靠后的元素在上面。

• 探索四：不同的层叠上下文只能依靠z-index来确定层叠顺序？

笔者做了实验，如下图所示，分别为block和inline元素使用opacity创建了层叠上下文，其层叠顺序是后出现的元素在上面。所以说元素种类也不影响层叠顺序。在测试其他CSS3属性是否能影响层叠顺序之前，笔者猜想：只有通过修改z-index值才能改变不同层叠上下文的层叠顺序。

顺便说一句，z-index 仅能在定位元素上奏效，定位（position：relative/absolute/fixed）+z-index（不为auto）可以实现创建层叠上下文，父元素display:flex/inline-flex的元素可被创建了层叠上下文。无论是哪种方式，层叠顺序是：z-index更大的元素在上面，z-index相同，出现顺序靠后的在上面。
下图是relative+z-index的示例，无论z-index为0的元素出现z-index为1的元素的前或者后，都被z-index为1的元素压盖，z-index都为1的不同元素，总是后出现的在上面。在笔者的实验中，保持这三个元素的z-index不变，将position改为absolute或者fixed，或者把三个元素的父盒子的display改为flex/inline-flex，层叠顺序不变。

仔细一想，层叠上下文的概念还是挺好理解的，比BFC和IFC都简单一些。不过在使用起来，也容易踩坑。下次在设计页面结构的时候，能提前注意到不同的层叠上下文，也就能避免一些问题了。