Detailed introduction to CSS stacking order and stack context

Solving problems does not consider compatibility. The questions are wild and unconstrained. Just say whatever comes to mind. If there are CSS attributes that you feel are unfamiliar in the problem solving, go and learn about it quickly. Bar.

Keep updating, keep updating, keep updating, say important things three times.

3. How much do you know about stacking level and stacking context?

<a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a> It seems very simple. The level of z-index determines the stacking priority, in fact, if you go deep into it, you will find that there is something inside.

Look at the following question, define two p A and B, to be included under the same parent p tag. The HTML structure is as follows:

<p>
    </p><p>#pA display:inline-block</p>
    <p> #pB float:left</p>

Their CSS is defined as follows:

.container{
    position:relative;
    background:#ddd;
}
.container > p{
    width:200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

roughly described, it means having a common The two p's of the parent container overlap. Is display:inline-block stacked on top, or float:left stacked on top?

Note that the order of the DOM here is to generate display:inline-block first, and then float:left. Of course, you can also reverse the order of the two DOMs as follows:

<p>
    </p><p> #pB float:left</p>
    <p>#pA display:inline-block</p>

You will find that no matter the order, it is always display:inline-block p Stacked on top.

This actually involves the so-called stacking level. There is a picture that can explain it well:

Using the logic of the above picture, the above problem can be easily solved. inline-blcok’s stacking level is compared to float should be high, so no matter the order of DOM, it will be stacked on top.

However, the above illustration is somewhat inaccurate. According to W3 official statement, the accurate 7 layers are:

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

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

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

4. ##the non-positioned floats.

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

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

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

A little translation:

1. 形成堆叠上下文环境的元素的背景与边框

2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）

3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素

4. 无 position 定位（static除外）的 float 浮动元素

5. 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）

6. 拥有 z-index:0 的子堆叠上下文元素

7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

所以我们的两个 p 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高，所以叠得更高。

不过！不过！不过！重点来了，请注意，上面的比较是基于两个 p 都没有形成 堆叠上下文 这个为基础的。下面我们修改一下题目，给两个 p ，增加一个 opacity:

.container{
    position:relative;
    background:#ddd;
}
.container > p{
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里，增加一个 opacity
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

Demo戳我。

会看到，inline-block 的 p 不再一定叠在 float 的 p 之上，而是和 HTML 代码中 DOM 的堆放顺序有关，后添加的 p 会 叠在先添加的 p 之上。

这里的关键点在于，添加的 opacity:0.9 这个让两个 p 都生成了 stacking context（堆叠上下文） 的概念。此时，要对两者进行层叠排列，就需要 z-index ，z-index 越高的层叠层级越高。

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

那么，如何触发一个元素形成 堆叠上下文 ？方法如下，摘自 MDN：

• 根元素 (HTML),

• z-index 值不为 "auto"的 绝对/相对定位，

• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，

• opacity 属性值小于 1 的元素（参考 the specification for opacity），

• transform 属性值不为 "none"的元素，

• mix-blend-mode 属性值不为 "normal"的元素，

• Elements whose filter value is not "none",

• elements whose perspective value is not "none",

• The element whose isolation attribute is set to "isolate",

• position: fixed

• Specify any CSS properties in will-change, even if you do not specify the value of these properties directly

• -webkit-overflow-Scrolling attribute is set to "touch" elements

So, above we give two The purpose of adding the opacity attribute is to form a stacking context. In other words, adding opacity and replacing the attributes listed above can achieve the same effect.

In a cascading context, its child elements are also cascaded according to the rules explained above. It is particularly worth mentioning that the z-index value of its child elements is only meaningful in the context of the parent cascading. This means that the parent element's z-index is lower than another sibling element of the parent element, and it is useless no matter how high the child element's z-index is.

Understanding the above stacking-level and stacking-context is the key to understanding the stacking order of CSS.

The above is the detailed content of Detailed introduction to CSS stacking order and stack context. For more information, please follow other related articles on the PHP Chinese website!