我正在参加「掘金·启航计划」

层叠上下文 stacking context

css中很有多上下文如：块级格式化上下文BFC（block formmatting context）、级联格式化上下文IFC（inline formatting context）等等。

理解层叠上下文的概念

1、借助其他的上下文的概念去理解层叠上下文。

2、上下文 context 是一抽象的概念。放在这里我们可以通俗的理解为关于层叠规则的一种约束环境，这种环境可以约束环境内部成员，也可以作为一个整体被所处的外部环境所约束。这样保证所有的元素都出于这样一个环境中，才有了层叠比较的可能性。没有环境就无法比较

3、借助代码来理解抽象的概念

初见层叠上下文

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>初见层叠上下文</title>
  </head>
  <body>
    <h3 class="root__header"></h3>
    <div id="stacking-context1" style="position: relative; z-index: 2;"></div>
    <span id="root-text"></span>
    <div id="stacking-context2" style="position: relative; z-index: 1;">
      <div id="stacking-context2__box" style="position: relative; z-index: 3;"></div>
      <span id="stacking-context2-text"></span>
    </div>
  </body>
</html>

几个问题：

1、有几个层叠上下文？

2、如何比较 stacking-context1 和 stacking-context2__box 的优先级？

层叠上下文的创建

和BFC一样层叠上下文也是由我们开发者赋予元素某些特定的CSS属性来创建的。如下表。

类型	创建条件	子类	注意点
现代型	CSS3新特性带来的层叠上下文	1、元素为flex布局（父元素设置display: flex	inline-flex;）,同时z-index不为auto2、元素的opacity 不为13、元素的transform值不是none4、元素的min-blend-mode 值不是normal5、元素的filter 值不是none6、元素的isolation 值是isolate7、元素的will-change 的属性值为上面2-6的任意一个（如will-change: transtform）8、原色的-webkit-overflow-scrolling 设为touch。。。。。。	CSS 会不断的更新带来新的特性，本次列举出几种情况，还有更多的特性等待挖掘。
传统型	使用z-index值为数值的定位元素	position为relative/absolute/fixed/static	z-index 默认值为 auto z-indexz-index: auto; 和 z-index: 0; 层级顺序相等z-index: auto; 相当于放开约束，提高层级顺序但是不具有层叠上下文的特性position: fixed; 不需要设置z-index也具有上下文的特性。
天生型	比较层叠首先需要有个环境，html作为所有元素的根节点，天生就是一个层叠上下文。	html

层叠上下文的作用

提高自身层叠优先级
形成约束边界，拒绝子元素越界

层叠顺序

正常的文档流遵守自左而右、自上而下的流向。如果需要层叠，一般把需要层叠的元素从文档中抽离出来，破坏其默认的文档流。常常用position定位来实现。层叠关系以盒子作为基准，span等内联元素的优先级依托于其所在的盒子。

层叠上下文中元素优先级分类

在一个层叠上下文中，一般将其子元素分为以下四类。

层叠优先级	元素	注意
-1	z-index为负值的层叠上下文
0	普通盒子	自左而右、自上而下
1	1、z-index为auto（生效的情况下）的盒子2、z-index为0的层叠上下文	z-index: 0;会形成层叠上下文，约束子元素。z-index: auto; 不会形成层叠上下文。
2	z-index为正值的层叠上下文

理解内容层叠优先级的概念

root {
  background-color: #999999;
  z-index: 0;
}
.position {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
}
 
 
<div class="position root">
  <div id="box1" class="position"></div>
  <div id="box2" class="position">
    <div id="box2-1" class="position" style="z-index: 1;"></div>
    <div id="box2-2" class="position" style="z-index: 2;"></div>
  </div>
  <div id="box3" class="position" style="z-index: 1;"></div>
  <div id="box4" class="position" style="z-index: -1;"></div>
  <div id="box5" class="position" style="z-index: 0;">
    <div id="box5-1" class="position" style="z-index: 1;"></div>
    <div id="box5-2" class="position" style="z-index: 2;"></div>
  </div>
</div>

总结

如果修改元素的优先级

修改元素在DOM中的先后顺序，后来居上。
将元素设置成层叠上下文，并按需设置z-index。

注意

非浮层元素
1. “不犯二”准则：对于非浮层元素，避免设置z-index值，一般来说 z-index值没有任何道理需要超过2。
2. 避免过大的z-index值。因为存在层叠上下文的概念。容易出现设置了过大的z-index，也无法覆盖其他元素
浮层元素
1. 浮层、弹框、错误提示等浮层元素一般来说总是需要浮在整个文档的最上层，并且dom文档具有不确定性，可能随时增加一些高层级元素。
2. 使用JavaScript动态的为浮层元素添加尽可能小的z-index值。

CSS系列-层叠规则