层叠上下文

css层叠

层叠上下文

层叠上下文(stacking context)，是HTML中一个三维的概念。每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。通常在元素发生堆叠时，就能看到某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
层叠上下文可以理解成，在发生堆叠的时候，当前元素和其子元素变成了一个整体，按照当前元素的层级堆叠。

层叠顺序

是指排列规则，如下:
border < z-index负值 < block < float < inline < z-index为0或者auto < z-index正值
即: 层叠上下文元素在子级元素下面， 自己元素根据不同属性来排列，相同属性则是后面的优于前面的。

例子：

    <style>
        .item{
            width:  300px;
            padding-top: 10px;
        }
        .father{
            position: relative;
            background: rgb(255,255,0);
        }
        .block{
            background: rgb(255, 0, 0);
            width: 100px;
            height: 120px;
        }
        .float{
            float: left;
            background: rgb(0,255,255);
            width: 100px;
            height: 100px;
            margin-left: 50px;
        }
        .inline{
            margin-left: -100px;
            background: rgb(0,255,0);
        }
        .zIndex-1{
            position: absolute;
            width: 300px;
            height: 200px;
            background: rgb(255,0,0);
            left: 0;
            top: 0px;
            z-index: -1;
        }
        .zIndex0{
            position: absolute;
            width: 200px;
            height: 100px;
            background: rgb(0,255,0);
            left: 0;
            top: 100px;
            z-index: 0;
        }
        .zIndexAuto{
            position: absolute;
            width: 150px;
            height: 150px;
            background: rgb(255,0,255);
            left: 0;
            top: 50px;
            z-index: auto;
        }
        .zIndex1{
            position: absolute;
            width: 100px;
            height: 50px;
            background: rgb(0,255,255);
            left: 0;
            top: 150px;
            z-index: 1;
        }
    </style>

    <div class="item">
        验证:  inline > float > block > border
        <div class="father">
            <span class="inline">inline元素</span>
            <div class="float">float元素float元素float</div>
            <div class="block">块级元素</div>
        </div>
    </div>
    <div class="item">
        验证:  正 > 0 = auto > 负值 (但是 0 和 auto 会有所区别  0会新建层叠上下文)
        <div class="father">
            <div class="zIndex1">正z-index</div>
            <div class="zIndexAuto">z-index:auto</div>
            <div class="zIndex0">z-index:0</div>
            <div class="zIndex-1">负的z-index</div>
        </div>
    </div>

展示规则

1. 当某一元素是变成层叠上下文之后，其子级元素只会内部相互比较,
2. 当某一元素是变成层叠上下文之后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
3. 层叠上下文可以包含在其他层叠上下文中。

生成层叠上下文条件

• 文档根元素（）；
• position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
• position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
• flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
• grid (grid) 容器的子元素，且 z-index 值不为 auto；
• opacity 属性值小于 1 的元素（参见 the specification for opacity）；
• mix-blend-mode 属性值不为 normal 的元素；
• 以下任意属性值不为 none 的元素：
  • transform
  • filter
  • perspective
  • clip-path
• mask / mask-image / mask-border
• isolation 属性值为 isolate 的元素；
• -webkit-overflow-scrolling 属性值为 touch 的元素；
• will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
• contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

参考

MDN