层叠上下文、层叠层级、层叠顺序

最新推荐文章于 2024-07-12 16:38:52 发布

Jiuto_crx

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量466

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Jiuto_crx/article/details/114860594

版权

层叠上下文、层叠层级、层叠顺序

层叠上下文 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;">
    parent2：

最低0.47元/天解锁文章

Jiuto_crx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
层叠上下文、层叠层级、层叠顺序

层叠上下文、层叠层级、层叠顺序层叠上下文 stacking context我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。如何创建层叠上下文文档根元素（<html>）；position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；positio
复制链接

扫一扫