如何理解层叠上下文？How to understand the cascading context ?

如何理解层叠上下文？

---

概念简述

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

如何产生？

触发以下条件则会产生层叠上下文：

• 根元素 (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"的元素，
• filter值不为 "none" 的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

How to understand the cascading context?

---

What is it?

The cascading context is a three-dimensional concept of HTML elements. These HTML elements extend on a hypothetical z-axis relative to the user facing the (computer screen) window or web page. The HTML elements occupy the space of the cascading context according to their own attributes in order of priority .

How to produce?

Triggering the condition will produce a cascading context:

• Root element (HTML),
• z-index value is not absolute/relative positioning of "auto",
• A flex item whose z-index value is not "auto", namely: parent element display: flex|inline-flex,
• Elements with an opacity attribute value less than 1 (refer to the specification for opacity),
• elements whose transform attribute value is not "none",
• elements whose mix-blend-mode attribute value is not "normal",
• elements whose filter value is not "none",
• Elements whose perspective value is not "none",
• Elements whose isolation attribute is set to "isolate",
• position: fixed
• Any CSS properties are specified in will-change, even if you do not directly specify the values ​​of these properties (refer to this article)
• -webkit-overflow-scrolling attribute is set to "touch" elements