层叠上下文、层叠层级、层叠顺序
层叠上下文 stacking context
我们假定用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,
层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。
如何创建层叠上下文
- 文档根元素(
<html>
);- position 值为 absolute(绝对定位)或 relative(相对定位)且 z-index 值不为 auto 的元素;
- position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持);
- flex (flexbox (en-US)) 容器的子元素,且 z-index 值不为 auto;
- grid (grid) 容器的子元素,且 z-index 值不为 auto;
- opacity 属性值小于 1 的元素(参见the specification for opacity);
- mix-blend-mode 属性值不为 normal 的元素;
- 以下任意属性值不为 none 的元素:
transform
filter
perspective
clip-path
mask/mask-image/mask-border- isolation 属性值为 isolate 的元素;
- -webkit-overflow-scrolling 属性值为 touch 的元素;
- will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素(参考这篇文章);
- contain 属性值为 layout、paint 或包含它们其中之一的合成值(比如 contain: strict、contain: content)的元素。
- 满足以上任意一个条件的元素将形成一个层叠上下文,我们称这样的元素为层叠上下文元素,相交普通元素离屏幕观察者更近(存疑)。
测试1
<div class="parent1" style="background-color: #009688;width: 300px;">
parent1:
<div class="child">
child1
</div>
</div>
<div class="parent2" style="background-color: #ffc107;width: 500px;text-align: right;