---
title: 描述 `z-index` 和堆叠上下文是如何形成的。
---

CSS 中的`z-index`属性可以控制重叠元素的垂直堆叠顺序。 `z-index`只影响定位元素(`position`值不是`static`的元素) 及其后代或 flex item。

在没有任何`z-index`值的情况下，元素按照它们在 DOM 中出现的顺序堆叠（同一层次中最低的一个出现在上面）。 具有非`static`定位(及其子位置) 的元素总是会出现在默认`static`位置的元素之上，不论 HTML 层次结构如何。

堆叠上下文是一个包含一组图层的元素。 在一个局部堆叠环境中，其子元素的`z-index`值是相对于该元素而不是根 document 设置的。 该上下文之外的层--即局部堆叠上下文的同级元素--不能位于它的层之间。 如果一个元素 B 位于元素 A 的上面，元素 A 的一个子元素 C 永远不会高于元素 B，即使元素 C 的`z-index`比元素 B 高。

每个堆叠上下文都是自成一体的--在元素的内容被堆叠后，整个元素被认为是按照父堆叠上下文的堆叠顺序。 少数 CSS 属性会触发一个新的堆叠上下文，如小于 1 的 `opacity` 、`filter` 不是 `none` 和 `transform` 不是 `none` 。

_**注意**：究竟是什么让一个元素有资格创建一个堆叠上下文，在这一长串[规则](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)中列出。_