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 CSSattributesthat 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?

z-indexIt seems very simple. The level ofz-indexdetermines the stackingpriority, in fact, if you go deep into it, you will find that there is something inside.

Look at the following question, define twopA and B, to be included under the same parentptag. The HTML structure is as follows:

 
#pA display:inline-block
 
 #pB float:left

TheirCSSis 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. Isdisplay:inline-blockstacked on top, orfloat:leftstacked on top?

Note that the order of the DOM here is to generatedisplay:inline-blockfirst, and thenfloat:left. Of course, you can also reverse the order of the two DOMs as follows:

 
 #pB float:left
 
#pA display:inline-block

You will find that no matter the order, it is alwaysdisplay:inline-blockpStacked 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’sstacking levelis compared tofloatshould 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'sz-indexis lower than another sibling element of the parent element, and it is useless no matter how high the child element'sz-indexis.

Understanding the abovestacking-levelandstacking-contextis 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!