层叠上下文【stacking context】与层叠顺序【stacking order】

时间 2019-11-08

标签层叠上下文 stacking context 顺序 stacking order 繁體版

原文原文链接

层叠上下文【stacking context】

对于stacking context，在MDN中的描述是css

Stacking context is the three-dimensional conceptualization of HTML
elements along an imaginary z-axis relative to the user who is assumed
to be facing the viewport or the webpage.HTML elements occupy this
space in priority order based on element attributes.html

翻译过来是：
层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
z轴即用户与屏幕间看不见的垂直线。web

层叠水平【stacking level】

层叠水平顺序决定了同一个层叠上下文中元素在z轴上的显示顺序ide

层叠顺序【stacking order】

关于这个，有一张图形能够形象的说明
wordpress

不过上面图示的说法有一些不许确，按照 W3官方的说法，准确的 7 层为：布局

the background and borders of the element forming the stacking context.flex

the child stacking contexts with negative stack levels (most negative first).ui

the in-flow, non-inline-level, non-positioned descendants.this

the non-positioned floats.spa

the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

the child stacking contexts with positive stack levels (least positive first).

翻译过来是：

造成层叠上下文环境的元素的背景与边框
拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
无 position 定位（static除外）的 float 浮动元素
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
拥有 z-index:0 的子堆叠上下文元素
拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

一个普通元素具备了层叠上下文，其层叠顺序就会变高。那它的层叠顺序究竟在哪一个位置呢？
这里须要分两种状况讨论：

若是层叠上下文元素不依赖z-index数值，则其层叠顺序是z-index:auto可当作z:index:0级别；
若是层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定。

因此为何定位元素会层叠在普通元素的上面？其根本缘由就在于，元素一旦成为定位元素，其z-index就会自动生效，此时其z-index就是默认的auto，也就是0级别，根据上面的层叠顺序表，就会覆盖inline或block或float元素。

而不支持z-index的层叠上下文元素自然z-index:auto级别，也就意味着，层叠上下文元素和未设置z-index的定位元素是一个层叠顺序的，因而当他们发生层叠的时候，遵循的是“后来居上”准则。

层叠上下文能够嵌套，内部层叠上下文及其全部子元素均受制于外部的层叠上下文。

如何比较两元素的上下关系

在同一个层叠上下文中，则根据7阶层叠水平比较。若两元素在同一层叠水平，则后来居上，即在DOM流中处于后面的元素会覆盖前面的元素。
在不一样的层叠上下文中，则直接比较父元素的层叠水平：
若父元素的z-index不一样，则z-index数值越大，越在上面。
若父元素的z-index相同，则在DOM流中处于后面的元素会覆盖前面的元素。

注：

比较时，先看两个元素是否是在同一个父元素之下，若不是，则一层层往上找，直到找到其祖先元素在同一级时中止。而后，再依次往下寻找各自的子元素，找到第一个是层叠上下文元素的子元素后进行比较。
子元素的 z-index 值只在父级层叠上下文中有意义。即父元素的 z-index 低于父元素另外一个同级元素，子元素 z-index再高也没用。

例：

<body>
    <div class="div1">
        <div class="div1-1">
            <div class="div1-1-1">div1-1-1</div>
        </div>
    </div>
    <div class="div2">
        <div class="div2-1">
            <div class="div2-1-1">div2-1-1</div>
        </div>
    </div>
</body>

当css按如下设置，则出现红色在绿色之上的效果。
缘由：要比较div-1-1与div2-1-1的上下，则先找到div1与div2在同一层级。而div1为普通元素,div1-1为层叠上下文元素，div2为层叠上下文元素，因此这时候div2与div1,div1-1在同一个层叠上下文，而div1-1的z-index为1，div2的z-index为1，DOM流中div2在div1-1以后，因此红色在绿色之上。若此时将div1-1的z-index设置为2时，则会出现绿色在红色之上的效果。

.div2 {
    position: absolute;
    z-index: 1;
}

.div1-1 {
    position: absolute;
    z-index: 1;
}

.div2-1 {
    position: absolute;
    z-index: 2;
}

.div1-1-1 {
    background-color: rgba(20, 150, 150, 0.9);
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #e6e6e6;
    font-size: 16px;
    position: absolute;
    z-index: 2;
}

.div2-1-1 {
    background-color: rgba(233, 2, 233, 0.5);
    width: 100px;
    height: 100px;
    margin-left: 70px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #e6e6e6;
    font-size: 16px;
    position: absolute;
    z-index: 3;
}

当在原样式基础上，再添加一个样式，则出现绿色在红色之上的效果，是由于这时候div2与div1在同一个层叠上下文，而div1的z-index为2，div2的z-index为1，因此绿色在红色之上。

.div1 {
    position: absolute;
    z-index: 2;
}

补充：

如下例子中，当将鼠标放在d1-inner上时，会发现d2在d1-inner上面。

缘由：不支持z-index的层叠上下文元素自然z-index:auto级别，因此当给d1-inner添加transform: scale(1.7,1.7);时，d1-inner在根元素的层叠上下文中的z-index:auto级别，而d2未设置z-index,因此其z-index就是默认的auto。二者都在根元素的层叠上下文中的z-index:auto级别，那就根据后来居上判断。d1-inner的父元素d1在DOM流中在d2的前面，因此致使d2在d1-inner上面。

<style type="text/css">
 .d1-inner {
    background-color: green;
    height: 150px;
    width: 400px;
    font-size: 40px;
    line-height: 1;
    color: red;
  }
  
  .d1-inner:hover {
    transform: scale(1.7, 1.7);
  }
  
  .d2 {
    position: relative;
  }
  
  .d2-inner {
    background-color: orange;
    width: 400px;
    font-size: 40px;
    line-height: 1;
    color: red;
  }
  </style>
 <div class="d1">
    <div class="d1-inner">d1-inner</div>
  </div>
  <div class="d2">
    <div class="d2-inner">d2-inner</div>
  </div>

如何触发

触发一个元素造成层叠上下文有如下方法，摘自 MDN：

根元素 (HTML)
z-index 值不为 "auto"的绝对/相对定位
一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex。（需知足两个条件才能触发：1是父级须要是display:flex或者display:inline-flex水平，2是子元素的z-index不是auto，必须是数值。则这个子元素为层叠上下文元素）
opacity 属性值小于 1 的元素（参考 the specification for opacity）
transform 属性值不为 "none"的元素
mix-blend-mode 属性值不为 "normal"的元素
filter值不为“none”的元素
perspective值不为“none”的元素
isolation 属性被设置为 "isolate"的元素
position: fixed
在 will-change 中指定了任意 CSS 属性，即使你没有直接指定这些属性的值
-webkit-overflow-scrolling 属性被设置 "touch"的元素

参考自：
深刻理解CSS中的层叠上下文和层叠顺序
 层叠顺序与堆栈上下文知多少