层叠上下文，又叫堆叠上下文，英文名：The stacking context
层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
听起来很繁琐，那么如何去理解层叠上下文呢？
在html中，有两个块元素 dad1 和 dad2 ，里面分别对应有自己的子元素 son1 和 son2 。给所有的元素分别设定不同的 background-color 以示区分。
然后将 dad2 中的子元素向上平移直到与 dad1 中的子元素重合，我们会发现， son1 覆盖在了 son2 的上面。这是因为我们给 son1 设定了 z-index 使他高于 son2 ，一切都很正常。那么是否这个 son1 永远都高于 son2 呢？
紧接着，我们将两个父元素都加上 z-index 为1,那么理论上是不影响刚才的结果变化的，那么神奇的事情发生了...
之前权重较低的 son2 突然覆盖在了上面，这是怎么回事呢？
在CSS中，根据正常的层叠顺序，由于有 z-index：2 的存在， son2 在页面中的层叠顺序应该高于 son1 ，但这是相对一个相同的层叠上下文下是生效的。由于在没有给父元素都加上 z-index 之前，默认的层叠上下文是整个 html 下，页面中的所有元素都在这层叠上下文下，遵守着层叠顺序。当我们给父元素都加上 z-index 之后，原来的 dad1 和 dad2 分别生成了两个新的层叠上下文，其中 dad2 的层叠顺序是高于 dad1 。那么其中的子元素因为隶属于不同的层叠上下文，要先比较父元素的层叠顺序。就好比在两个不同的部门下，如果部门的等级高，那么这个部门所有人的等级都要高，哪怕是部门中最低的那个，都要高于低级部门的任何一个人。所以 son2 会出现在上方，权重比 son2 要高。
总结一下，在CSS中，如果没有生成新的层叠上下文，则按照css的默认层叠顺序进行排序。而如果有了新的层叠上下文，则要根据元素所在层叠上下文的权重来排序，层叠上下文高的内部元素，权重都要高于层叠上下文低的内部元素。只要记熟了层叠顺序，理解了层叠上下文的含义，多加练习就可以掌握了。
层叠指的是样式的优先级，当产生冲突时以优先级高的为准。1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
2. id选择符>（伪）类选择符>元素选择符
3. 权重相同时取后面定义的样式
以下是一段经典的html，三个类名分别为模块、标题和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html页面都可以由这种结构嵌套或者累加而成。
若满意，请采纳。谢谢。
