共计 1525 个字符，预计需要花费 4 分钟才能阅读完成。
如何了解层叠上下文？
概念简述
层叠上下文是 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
正文完