层叠上下文

您所在的位置:网站首页 修改列表元素次序 层叠上下文

层叠上下文

2023-06-02 17:35| 来源: 网络整理| 查看: 265

在本篇之前的部分——运用 z-index,(我们认识到)某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。

文档中的层叠上下文由满足以下任意一个条件的元素形成:

文档根元素(); position 值为 absolute(绝对定位)或 relative(相对定位)且 z-index 值不为 auto 的元素; position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持); flex (flex) 容器的子元素,且 z-index 值不为 auto; grid (grid) 容器的子元素,且 z-index 值不为 auto; opacity 属性值小于 1 的元素(参见 the specification for opacity); mix-blend-mode 属性值不为 normal 的元素; 以下任意属性值不为 none 的元素: transform filter backdrop-filter perspective clip-path mask / mask-image / mask-border isolation 属性值为 isolate 的元素; will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素(参考这篇文章); contain 属性值为 layout、paint 或包含它们其中之一的合成值(比如 contain: strict、contain: content)的元素。

在层叠上下文中,子元素同样也按照上面解释的规则进行层叠。重要的是,其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

总结:

层叠上下文可以包含在其他层叠上下文中,并且一起创建一个层叠上下文的层级。 每个层叠上下文都完全独立于它的兄弟元素:当处理层叠时只考虑子元素。 每个层叠上下文都是自包含的:当一个元素的内容发生层叠后,该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

备注: 层叠上下文的层级是 HTML 元素层级的一个子级,因为只有某些元素才会创建层叠上下文。可以这样说,没有创建自己的层叠上下文的元素会被父层叠上下文同化。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3