细说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都简单一些。不过在使用起来，也容易踩坑。下次在设计页面结构的时候，能提早注意到不一样的层叠上下文，也就能避免一些问题了。