共计 1555 个字符，预计需要花费 4 分钟才能阅读完成。
在日常开发中，常常应用 z-index 款式属性调整元素的层级大小。个别状况下，都能达到元素之间笼罩成果的要求。但在某些场景下，不管定位元素 z-index 属性值设置多大，都无奈在页面的最顶层出现。尽管能够能够把该元素晋升为 <body> 的间接子元素，并且的确能够达到成果，但比拟繁琐，开发效率比拟低下。为此，开始对 z-index 款式属性开始钻研，但钻研到最初发现：页面的渲染是由若干个图层通过层叠上下文的程序，顺次渲染而成。上面就层叠上下文全面说说。
层叠上下文（stacking context）
层叠上下文是 HTML 中的一个三维概念，是元素在 z 轴上的绝对地位的形容。对于已经通过 photoshop 设计稿来获取页面元素尺寸的开发者而言，层叠上下文和图层的概念十分相似。
元素造成层叠上下文的条件
- 文档根元素（<html>）；
- 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）的元素。
层叠上下文之间的关系
层叠上下文的子元素在满足条件后能够造成一个新的子层叠上下文，从而整体上造成层叠上下文的树形关系（父子嵌套、兄弟平行）。
不同层叠上下文的各个子元素，其影响范畴仅限于父级层叠上下文，而不会影响到其余层叠上下文。例如：
上图中：
- 左侧中的 main1 和 main2 设置了
z-index为 0，造成了新的层叠上下文，并且 main2 的层级比 main1 大；move1 设置了z-index为 999999，但因为无奈冲破父级层叠上下文的限度，无奈笼罩在 move2 的下面。 - 右侧中的 main1 和 main2 设置了
z-index为 auto，无奈造成了新的层叠上下文；move1 和 move2 有独特的父级层叠上下文，因为 move1 设置了z-index为 999999，所以能够笼罩在 move2 的下面。
试试看
层叠程序（stacking order）
一个层叠上下文的子元素能够是层叠上下文，也能够不是层叠上下文。子元素在 z 轴上的程序规定，是通过层叠程序来表白的。具体如下图所示：
整体示意图
总结
由 z-index 引发了对层叠上下文的全面认知。当初利用层叠上下文的逻辑，解释结尾的景象：因为设置 z-index 属性的定位元素，其父元素为层叠上下文（也为定位元素），并且父元素并非位于整个页面的最高层级；所以设置 z-index 属性的定位元素，无论其 z-index 属性值设置多大，都无奈冲破父元素的限度，达到整个页面的最高层级。
在日常开发中，有很多开发者在面对元素层叠场景时，都会为每个相干元素增加 z-index 属性。心愿这篇文章能对这种行为有所帮忙，全面认知层叠上下文，缩小非必要 z-index 属性的书写。