z-index

【曾以为CSS牛逼了，然而并没有系列】

Paste_Image.png

虽说是著名的，但宝宝还不怎么理解，也是惭愧。。。

简单翻一下这个著名的7level来进行层叠：

1. the background and borders of the element forming the stacking context.
   stacking context元素的背景和边框

2. the child stacking contexts with negative stack levels (most negative first).
   具有z-index为负值的元素，负的越多越往下

3. the in-flow, non-inline-level, non-positioned descendants.
   正常流式布局，display不是inline的布局，没有position特殊化的元素

4. the non-positioned floats.
   没有position特殊化的，float元素

5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
   正常流式布局，display为inline、inline-block、table布局的元素

6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
   z-index为0的stacking context元素

7. the child stacking contexts with positive stack levels (least positive first).
   z-index为正的stacking context元素

so！一般的元素（没有形成stacking context（堆叠上下文）的元素）是按照上面的方式进行层叠的。

举个栗子🌰：

<div class="container">
    <div class="inline-block">A</div>
    <div class="block">C</div>
    <div class="float">B</div>
</div>

这里面当设置margin-top或是margin-left为某一个负值，让它们彼此之间有重叠的部分时，会发现无论怎样变换A\B\C三个元素的位置，三者的状态都是：C在最下面、B在中间层、A在最上层。这就中了上面七层level的咒语，如果想要改变这种与生俱来的性质，就要让它们变成stacking context，这样才能改变谁在上谁在下的现状。

现在问题来了。。。
What is stacking context（堆叠上下文）?

形成stacking context的因素包括以下几种：

• the root element (HTML),
  根元素HTML
• positioned (absolutely or relatively) with a z-index value other than "auto”,
  position为absolute或是relative，并且css属性设置z-index为非auto值
• a flex item with a z-index value other than "auto",that is the parent element display: flex|inline-flex,
  父元素设置了flex|inline-flex，使得该元素成为了一个flex item，而这个flex item同样拥有一个非auto值的z-index
• elements with an opacity value less than 1. (See the specification for opacity),
  元素拥有opacity小于1的值
• elements with a transform
  value other than "none”,
  元素拥有transform为非none的值
• elements with a mix-blend-mode
  value other than "normal”,
  元素拥有mix-blend-mode为非normal的值
• elements with a filter
  value other than "none”,
  元素拥有filter为非none的值
• elements with a perspective
  value other than "none”,
  元素拥有perspective为非none的值
• elements with isolation
  set to "isolate”,
  元素的isolation设置为isolate
• position: fixed,
  元素position为fixed
• specifying any attribute above in will-change
  even if you don't specify values for these attributes directly (See this post)
  在will-change中指定了任意CSS属性，即便没有直接指定这些属性的值（什么鬼）
• elements with -webkit-overflow-scrolling
  set to “touch”
  webkit-overflow-scrolling被设置为touch的属性。

所以以上情况都会形成stacking context，而形成stacking context之后就可以进行“正常排版”，按照DOM堆放顺序、后面的div显示在上，之类的。
当然，如果元素A的父亲不如元素B父亲的层级高的话，儿子的z-index再高也白扯。这确实是一个拼老子的时代啊。。。