层叠上下文
层叠上下文(stacking context)，是HTML中一个三维的概念，如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。
层叠上下文高于普通元素，在z轴上。
根节点元素为默认处于层叠上下文中。
触发条件
HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。- 普通元素设置
position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。（郭东东的触发中没有设置z-index） - CSS3中的新属性也可以产生层叠上下文。
父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素； 元素的opacity属性值不是1； 元素的transform属性值不是none； 元素mix-blend-mode属性值不是normal`； 元素的filter属性值不是none； 元素的isolation属性值是isolate； will-change指定的属性值为上面任意一个； 元素的-webkit-overflow-scrolling属性值设置为touch。 复制代码
层叠等级
- 普通元素的层叠等级优先由其所在的层叠上下文决定。
- 层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。（比较不同层叠上下文在z轴上的前后顺序， ?z-index）
下图为同一层叠上下文中元素在z轴上的前后顺序。(层叠顺序图)
图片拷贝自掘金用户郭东东
层叠顺序
“层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示
元素层叠场景的显示判断
- 首先先看要比较的两个元素是否处于同一个层叠上下文中：
- 如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。
- 如果两个元素不在同一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。
- 当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。
Q: 一个z-index： 99999的元素为什么被普通元素盖住了？
A: 因为其所在的层叠上下文的层叠等级低于该普通元素所在层叠上下文层叠等级。
参考文章
以上的内容有部分内容参考了简书作者长安曹公子的文章-《彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index》
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
