了解 z-index 堆叠顺序
Understanding z-index stacking order
我对使用 z-index 来决定堆栈顺序有点困惑。
我不太明白浏览器如何处理带 position 属性 的元素和不带它的元素。
是否有一个通用的规则来决定元素的堆叠顺序，无论是否有明确定位的元素？
感谢不同情况的示例。一般来说：
- 已设置位置和未设置位置的
<div> 混合同级。
- 嵌套
<div>s 与同级 <div>s 混合，有位置设置和没有位置设置。
CSSz-index属性
的基础知识
一个简单的概念
z-index 属性 基于一个简单的概念：具有较高值的元素将位于沿 z 轴具有较低值的元素的前面。因此，如果您将 z-index: 1 应用到 div.box1，并且 div.box2 有一个 z-index: 0，那么 div.box1 将覆盖 div.box2。
对于z轴而言，是指三维平面上的深度。在您的计算机上，它可以解释为物体在其上离您越来越近和越来越远的平面。 （了解有关 Cartesian coordinate system 的更多信息。）
来源：Wikipedia
z-index 适用于定位元素
除非您处理弹性项目或网格项目，否则 z-index 属性 仅适用于定位元素。这意味着您可以在具有 position: absolute、position: relative、position: fixed 或 position: sticky 的元素上使用 z-index。如果元素有 position: static（默认值），或其他定位方案如 float，则 z-index 将无效。
如前所述，尽管 z-index 中定义的 CSS 2.1, applies only to positioned elements, flex items and grid items 可以创建堆栈上下文，即使 position 为 static。
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw
document order, and z-index values other than auto create a stacking context even if position is static.
5.4. Z-axis Ordering: the z-index property
The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is
used in place of raw document order, and z-index values other than auto create a stacking context even if
position is static.
下面是 z-index 处理非定位弹性项目的演示：https://jsfiddle.net/m0wddwxs/
堆叠上下文
定位元素并应用 z-index 后，将创建堆叠上下文。
（另见：Full list of circumstances where a stacking context is created.）
堆栈上下文是一组用于管理具有 z-index 的定位元素及其后代的规则。这些规则管理 堆叠顺序 中子元素的放置以及 属性 的影响范围。
本质上，层叠上下文将z-index范围限制在元素本身，其子元素不能影响另一个层叠上下文中元素的层叠顺序。
如果您曾尝试应用越来越高的 z-index 值，却发现该元素永远不会移到前面，您可能是在尝试在不同的堆叠上下文中叠加一个元素。
Groups of elements with a common parent that move forward or backward
together in the stacking order make up what is known as a stacking
context. A full understanding of stacking contexts is key to really
grasping how z-index and the stacking order work.
Every stacking context has a single HTML element as its root element.
When a new stacking context is formed on an element, that stacking
context confines all of its child elements to a particular place in
the stacking order. That means that if an element is contained in a
stacking context at the bottom of the stacking order, there is no way
to get it to appear in front of another element in a different
stacking context that is higher in the stacking order, even with a
z-index of a billion!
堆叠顺序
CSS 在页面上布置元素时遵守堆叠顺序。这些是没有指定 z-index 时的堆叠规则，从远到近：
- 根元素的背景和边框
- 非定位、非浮动块元素，按照它们在源代码中出现的顺序排列
- 非定位浮动元素，按照它们在源代码中出现的顺序
- 内联元素
- 定位元素，按照它们在源代码中出现的顺序
如果应用z-index 属性，堆叠顺序被修改：
- 根元素的背景和边框
z-index 小于 0- 非定位、非浮动块元素，按照它们在源代码中出现的顺序排列
- 非定位浮动元素，按照它们在源代码中出现的顺序
- 内联元素
- 定位元素，按照它们在源代码中出现的顺序
z-index大于0的定位元素
来源：W3C
底线：一旦你理解了堆叠上下文，z-index就很容易了。
有关 z-index 的示例，请参阅：How z-index works!
有关解释 z-index（包括 opacity 如何影响堆叠顺序）的简短但内容丰富的文章，请参阅：What No One Told You About Z-Index
有关 z-index 的完整摘要以及许多示例和插图，请参阅：MDN Understanding CSS z-index
要深入了解堆叠上下文，请阅读：W3C Elaborate description of Stacking Contexts
我对使用 z-index 来决定堆栈顺序有点困惑。
我不太明白浏览器如何处理带 position 属性 的元素和不带它的元素。
是否有一个通用的规则来决定元素的堆叠顺序，无论是否有明确定位的元素？
感谢不同情况的示例。一般来说：
- 已设置位置和未设置位置的
<div>混合同级。 - 嵌套
<div>s 与同级<div>s 混合，有位置设置和没有位置设置。
CSSz-index属性
的基础知识
一个简单的概念
z-index 属性 基于一个简单的概念：具有较高值的元素将位于沿 z 轴具有较低值的元素的前面。因此，如果您将 z-index: 1 应用到 div.box1，并且 div.box2 有一个 z-index: 0，那么 div.box1 将覆盖 div.box2。
对于z轴而言，是指三维平面上的深度。在您的计算机上，它可以解释为物体在其上离您越来越近和越来越远的平面。 （了解有关 Cartesian coordinate system 的更多信息。）
z-index 适用于定位元素
除非您处理弹性项目或网格项目，否则 z-index 属性 仅适用于定位元素。这意味着您可以在具有 position: absolute、position: relative、position: fixed 或 position: sticky 的元素上使用 z-index。如果元素有 position: static（默认值），或其他定位方案如 float，则 z-index 将无效。
如前所述，尽管 z-index 中定义的 CSS 2.1, applies only to positioned elements, flex items and grid items 可以创建堆栈上下文，即使 position 为 static。
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and
z-indexvalues other thanautocreate a stacking context even ifpositionisstatic.5.4. Z-axis Ordering: the
z-indexpropertyThe painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and
z-indexvalues other thanautocreate a stacking context even ifpositionisstatic.
下面是 z-index 处理非定位弹性项目的演示：https://jsfiddle.net/m0wddwxs/
堆叠上下文
定位元素并应用 z-index 后，将创建堆叠上下文。
（另见：Full list of circumstances where a stacking context is created.）
堆栈上下文是一组用于管理具有 z-index 的定位元素及其后代的规则。这些规则管理 堆叠顺序 中子元素的放置以及 属性 的影响范围。
本质上，层叠上下文将z-index范围限制在元素本身，其子元素不能影响另一个层叠上下文中元素的层叠顺序。
如果您曾尝试应用越来越高的 z-index 值，却发现该元素永远不会移到前面，您可能是在尝试在不同的堆叠上下文中叠加一个元素。
Groups of elements with a common parent that move forward or backward together in the stacking order make up what is known as a stacking context. A full understanding of stacking contexts is key to really grasping how z-index and the stacking order work.
Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!
堆叠顺序
CSS 在页面上布置元素时遵守堆叠顺序。这些是没有指定 z-index 时的堆叠规则，从远到近：
- 根元素的背景和边框
- 非定位、非浮动块元素，按照它们在源代码中出现的顺序排列
- 非定位浮动元素，按照它们在源代码中出现的顺序
- 内联元素
- 定位元素，按照它们在源代码中出现的顺序
如果应用z-index 属性，堆叠顺序被修改：
- 根元素的背景和边框
z-index小于 0 的定位元素
- 非定位、非浮动块元素，按照它们在源代码中出现的顺序排列
- 非定位浮动元素，按照它们在源代码中出现的顺序
- 内联元素
- 定位元素，按照它们在源代码中出现的顺序
z-index大于0的定位元素
来源：W3C
底线：一旦你理解了堆叠上下文，z-index就很容易了。
有关 z-index 的示例，请参阅：How z-index works!
有关解释 z-index（包括 opacity 如何影响堆叠顺序）的简短但内容丰富的文章，请参阅：What No One Told You About Z-Index
有关 z-index 的完整摘要以及许多示例和插图，请参阅：MDN Understanding CSS z-index
要深入了解堆叠上下文，请阅读：W3C Elaborate description of Stacking Contexts