理解CSS中的层叠上下文和层叠顺序

Bryan 发布于2019-08-30 14:14 / 3222人阅读

摘要：后来居上当元素的层叠水平一致层叠顺序相同的时候，在流中处于后面的元素会覆盖前面的元素。相关连接深入理解中的层叠上下文和层叠顺序层叠顺序探究分层的显示

什么是层叠上下文（stacking context）

可以理解为一个dom节点在Z轴高人一等，特性类似于BFC，即层叠上下文的内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。

CSS2创建层叠上下文的两种方法（参考MDN）

根元素 (HTML)

绝对（absolute）定位或相对（relative）定位且 z-index 值不为”auto”

CSS3新增的8种方法（参考MDN）

一个 flex 元素(flex item)，且 z-index 值不为 “auto”，也就是父元素 display: flex|inline-flex

元素的 opacity 属性值小于 1（参考：the specification for opacity）

元素的 transform 属性值不为 “none”

元素的 mix-blend-mode 属性值不为 “normal”

元素的 isolation 属性被设置为 “isolate”

在 mobile WebKit 和 Chrome 22+ 内核的浏览器中，position: fixed 总是创建一个新的层叠上下文, 即使 z-index 的值是 “auto”

在 will-change 中指定了任意 CSS 属性，即便你没有定义该元素的这些属性（参考：Everything You Need to Know About the CSS will-change Property）

元素的 -webkit-overflow-scrolling 属性被设置 “touch”

什么是层叠水平（stacking level）

层叠水平决定了同一个层叠上下文中元素在z轴上的显示顺序（层叠顺序），也就是说普通元素的层叠水平优先由层叠上下文决定。

层叠顺序（不包含CSS3属性）

注意：以上只适用于同一个层级上下文

层叠顺序的例子

CSS2层叠上下文的层叠顺序demo

创建层叠上下文的opacity影响层叠顺序的例子

验证css中opacity创建层叠上下文影响的层叠顺序demo

层叠准则

谁大谁上：当具有明显的层叠水平标识（即上面那幅层叠顺序图）的时候，在同一个层叠上下文内，层叠水平值大的那一个覆盖小的那一个。

后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

结论

属于同一层叠上下文的元素（无论它们在结构上是兄弟或父子，甚至是祖孙），都遵循上文所述的层叠顺序；

不同的层叠上下文之间，层级较大的层叠上下文元素及其内部元素位于层级小的层叠上下文元素及其内部元素之上；

不同的层叠上下文之间互相独立；

层叠上下文可嵌套，内部规则不影响外部。

相关连接

MDN：The stacking context
深入理解CSS中的层叠上下文和层叠顺序
css层叠顺序探究
分层的显示

GPU云服务器云服务器 html层叠顺序 html按钮层叠 html 层叠悬浮 html外部层叠样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115876.html

彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

摘要：栗子有两个，被包裹在一个里，被包裹在另一个盒子里，同时为两个和设置和属性效果我们发下，虽然元素的值为，远大于和的值，但是由于的父元素产生的层叠上下文的的值为，的父元素所产生的层叠上下文的值为，所以永远在和下面。前言最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面...

Steve_Wang_ 2019-08-29 16:35 评论0 收藏0
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

摘要：栗子有两个，被包裹在一个里，被包裹在另一个盒子里，同时为两个和设置和属性效果我们发下，虽然元素的值为，远大于和的值，但是由于的父元素产生的层叠上下文的的值为，的父元素所产生的层叠上下文的值为，所以永远在和下面。前言最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面...

Donne 2019-08-23 11:36 评论0 收藏0
CSS 层叠上下文（Stacking Context）

摘要：当第二层的容器盒子升级为层叠上下文时，红色盒子及灰色盒子的轴层级受制于第二层的容器盒子。当元素处于同一层叠上下文内时可按照如下规则进行层叠判断。本文首发于政采云前端团队博客：CSS 层叠上下文（Stacking Context）在网页制作的过程中，元素与元素之间的位置关系，在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚...

marek 2019-08-30 15:44 评论0 收藏0
【学习笔记】CSS深入理解之z-index

摘要：张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。张鑫旭的CSS深入理解之z-index学习笔记层叠上下文什么是层叠上下文？在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。如何产生层叠上下文？根元素具有根层叠上下文 z-index不为auto的定位元素一个 z-index 值不为 ...

Steven 2019-08-30 15:54 评论0 收藏0