层叠上下文初识 - 利用 chrome devTools 实现 css性能优化
MDN:堆栈上下文
参考博客:
在浏览器的元素渲染过程中,除了水平的 XY 布局,还有一条沿着相对于用户的假想 Z 轴。
在水平的 XY 布局中,有 块级上下文(BFC) 等绘制规则,而在 Z 轴上,有 层叠上下文(stacking context) 的绘制规则。
在某些时候,我们对某些元素使用 z-index
,导致某些元素的呈现顺序受其 z-index
值影响。发生这种情况是因为这些元素具有特殊的属性,这些属性导致它们形成了 层叠上下文。从而可以根据 z-index
指定 Z 轴的优先级。
层叠上下文(stacking context,MDN 官网称之为 堆叠上下文,此文统称 层叠上下文
层叠上下文
如何形成层叠上下文
在以下情况下,文档中的任何元素 只要拥有以下条件之一 即可形成堆叠上下文:
根元素:
- 文档的根元素(
<html>
)。
position
:
- 值为
absolute
或者relative
,并且z-index
的值不为auto
的元素。 - 值为
fixed
或sticky
的元素(sticky
可用于所有移动浏览器,但不适用于较旧的桌面浏览器)。
容器:
- 元素是
flex
容器的子元素,并且其z-index
的值不是auto
。 - 元素是
grid
容器的子元素,并且其z-index
值不是auto
。
opacity
:
opacity
的值小于的元素1
(请参见不透明度的规范)。
其他:
- 具有以下任一属性的元素,并且其值不是
none
:transform
filter
(滤镜)perspective
clip-path
(裁剪)mask
/mask-image
/mask-border
mix-blend-mode
的值不是normal
的元素。
- 属性
isolation
(隔离)的值为isolate
的元素。(该属性就是可以主动申请一个 层叠上下文)
以下为当前兼容性不足或者不推荐的但能生成 层叠上下文 的技术:
- 属性
-webkit-overflow-scrolling
的值touch
为的元素。 - 属性
will-change
值不为初始值的元素(重要提示:will-change
旨在用作最后手段,以尝试解决现有的性能问题。不应将其用于预期性能问题。)。 - 属性
contain
的值layout
,或者paint
,或包括它们中的一个复合值(即contain: strict
,contain: content
)。(**这是一项实验性技术,**请在生产中使用它之前仔细检查浏览器兼容性表。)
综上:
-
层叠上下文可以被其他层叠上下文包含,并一起创建层叠上下文的层次结构
-
每个层叠上下文和其兄弟独立开来;处理层叠上下文时仅考虑后代元素
-
每个层叠上下文都是独立的,将元素的内容堆叠之后,将按照父层叠上下文的堆叠顺序考虑整个元素;
**注意:**比较堆叠顺序时,将只比较同级 DOM 的堆叠顺序,相同情况下再考虑子元素,直到一方比另一方大。
层叠顺序
别被吓到了,总结下来就一句话:谁大谁上,后来居上
Demo 1
考虑如下两个div
<body>
<div id="a">
<div id="a1"></div>
<div id="a2"