【曾以为CSS牛逼了，然而并没有系列】
Paste_Image.png
虽说是著名的，但宝宝还不怎么理解，也是惭愧。。。
简单翻一下这个著名的7level来进行层叠：
-
the background and borders of the element forming the stacking context.
stacking context元素的背景和边框 -
the child stacking contexts with negative stack levels (most negative first).
具有z-index为负值的元素，负的越多越往下 -
the in-flow, non-inline-level, non-positioned descendants.
正常流式布局，display不是inline的布局，没有position特殊化的元素 -
the non-positioned floats.
没有position特殊化的，float元素 -
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
正常流式布局，display为inline、inline-block、table布局的元素 -
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
z-index为0的stacking context元素 -
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再高也白扯。这确实是一个拼老子的时代啊。。。
网友评论