首先我们需要了解css中堆叠顺序的概念
在没有触发堆叠上下文时，正常的堆叠顺序应该为：
负z-index<background<border<块级元素<浮动元素<文字/内联元素<定位元素<正z-index （如果是兄弟同级元素，后出现的属性会覆盖前一个属性）
现在我们引入堆叠上下文的概念
在MDN文档上对堆叠上下文的定义是：
【层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间】
根据字面定义我们很难理解堆叠上下文，所以我们先了解堆叠上下文的特性，知道什么样的特性会触发堆叠上下文
以下是MDN给出的触发堆叠上下文的元素特性：
- 根元素 (HTML),
- z-index 值不为 "auto"的 绝对/相对定位，
- 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
-
opacity属性值小于 1 的元素（参考 the specification for opacity）， -
transform属性值不为 "none"的元素， -
mix-blend-mode属性值不为 "normal"的元素， -
filter值不为“none”的元素， -
perspective值不为“none”的元素， -
isolation属性被设置为 "isolate"的元素， position: fixed- 在
will-change中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章） -
-webkit-overflow-scrolling属性被设置 "touch"的元素
那么，堆叠上下文到底有什么用呢？
在这里我们先思考一个问题，一个元素X设置了z-index:999；这个元素X一定是离用户最近的元素吗？
答案当然不是。从定义中我们可以看到堆叠上下文可以对元素的z-index产生影响。当某个元素触发了堆叠上下文，就相当于形成了一个小部门，假如这个堆叠上下文的z-index比元素X的堆叠上下文的z-index要高,这时候在小部门里的元素都要比元素X要高，因为这个部门本身就比X所处的部门高级。
由此可以看出堆叠上下文会影响元素的z-index。
以上是对堆叠上下文的一个简单理解，如有错误，欢迎指出。
网友评论