关于前端:CSS-中的层叠上下文

什么是层叠上下文

层叠上下文即是网页在 Z 轴方向的一个概念，依据这个个性咱们能够在页面上通过元素重叠实现一些成果。比方页面上常见的疏导浮层、Modal 对话框用的就是这个个性，如下图中的下拉菜单：

一瞬间咱们就想到了 position: relative, position: absolute, z-index 这些属性，没错，通过这些就能够造成层叠上下文，当然了也不仅仅是这些。

层叠上下文的造成

那么层叠上下文是如何产生的呢？依据 MDN 里的解释，只有合乎以下特色就造成了层叠上下文：

• html 根元素本身就会创立一个层叠上下文
• position 值为 absolute 或 relative 且 z-index 值不为 auto 的元素
• position 值为 fixed 或 sticky 的元素（留神：sticky 在老旧浏览器上不反对）
• flex 容器的子元素，且 z-index 值不为 auto
• grid 容器的子元素，且 z-index 值不为 auto
• opacity 属性值不为 1 的元素
• mix-blend-mode 属性不为 normal 的元素
• transform 属性值不为 none 的元素
• filter 属性值不为 none 的元素
• perspective 属性值不为 none 的元素
• clip-path 属性值不为 none 的元素
• mask / mask-image / mask-border 属性值不为 none 的元素
• isolation 属性值为 isolate 的元素
• -webkit-overflow-scrolling 属性值为 touch 的元素
• will-change 值设定了任一属性而该属性在非初始值（non-initial）时会创立层叠上下文
• contain 属性值为 layout、paint 或蕴含它们其中之一的合成值（比方 contain: strict、contain: content）的元素

看起来很多，其实情理都是一样的，在同一层叠上下文中元素会依照肯定的规定进行层叠，比方设置 absolute 的元素会依照 z-index 的大小从上到下顺次层叠。当然要比拟 z-index 的大小只有在同一个层叠上下文中才有意义。

层叠程序

在同一个层叠上下文中，定位元素会依照 z-index 的大小从上到下进行层叠，如果 z-index 一样，那么前面的元素等级要大于后面的，「后来者居上」。

那么惯例流中元素是怎么解决的呢？能够参考下图：

图片起源：https://segmentfault.com/a/11…

另外，不在同一个层叠上下文中的元素，如果要进行层叠程序解决，肯定要留神父元素自身的层叠程序。

相干参考

• The stacking context – CSS: Cascading Style Sheets | MDN
• 深刻了解 CSS 中的层叠上下文和层叠程序