共计 1106 个字符，预计需要花费 3 分钟才能阅读完成。
什么是层叠上下文
层叠上下文即是网页在 Z 轴方向的一个概念，依据这个个性咱们能够在页面上通过元素重叠实现一些成果。比方页面上常见的疏导浮层、Modal 对话框用的就是这个个性，如下图中的下拉菜单：
一瞬间咱们就想到了 position: relative, position: absolute, z-index 这些属性，没错，通过这些就能够造成层叠上下文，当然了也不仅仅是这些。
层叠上下文的造成
那么层叠上下文是如何产生的呢？依据 MDN 里的解释，只有合乎以下特色就造成了层叠上下文：
html根元素本身就会创立一个层叠上下文position值为absolute或relative且z-index值不为auto的元素position值为fixed或sticky的元素（留神：sticky 在老旧浏览器上不反对）flex容器的子元素，且z-index值不为autogrid容器的子元素，且z-index值不为autoopacity属性值不为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 中的层叠上下文和层叠程序
正文完