上篇文章《CSS半透明效果的属性和场景》最后提到了级联上下文。在本文中，我们将讨论不透明度和级联上下文。建议读者在阅读本文前仔细阅读张新旭的《深入理解CSS中的层叠上下文和层叠顺序》，并自行练习生成级联上下文的各种方法。探索一：使用opacity生成的stackingcontext会覆盖基本元素。如下图，块元素的opacity不为1，形成堆叠上下文，无论内联元素在块元素的前面还是后面，都会被块元素覆盖。探索二：通过opacity创建堆叠上下文的两个元素，堆叠顺序为：顺序靠后出现的元素在最上面。如下图所示，不透明度相同或不同的元素总是最后出现在最上面。由此可知，不透明度的改变不会改变层叠顺序。探索三：如果两个元素使用z-index和opacity来创建层叠上下文，如何判断层叠顺序？其实每个元素都有z-index，默认值为auto，z-index为0的效果相当于z-index为auto的效果。我们可以把用opacity创建的stackingcontext的z-index看成auto，所以两个stackingcontext的堆叠顺序由z-index决定，z-index大的元素在最上面，z-index为相同的(0==auto)然后后面出现的元素出现在最上面。探索4：不同的层叠上下文只能靠z-index来确定层叠顺序？作者做了一个实验。如下图，分别为block元素和inline元素使用opacity创建了一个stackingcontext，stackingorder是后面出现的元素在最上面。所以元素类型不影响堆叠顺序。在测试其他CSS3属性是否会影响堆叠顺序之前，笔者推测只能通过修改z-index值来改变不同堆叠上下文的堆叠顺序。对了，z-index只能作用于定位元素，positioning(position:relative/absolute/fixed)+z-index(notauto)可以创建堆叠上下文，父元素显示：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，或者将三个元素的parentbox的显示改为flex/inline-flex，堆叠顺序不变。仔细想想，级联上下文的概念还是蛮好理解的，比BFC、IFC简单。但是使用起来很容易踩坑。下次设计页面结构时，可以提前注意不同的级联上下文，可以避免一些问题。
