了解 z-index 堆叠顺序

我对使用有点困惑z-index决定堆栈顺序。

我不太明白浏览器如何处理元素position财产与没有财产的人联合起来。

无论是否有明确定位的元素，是否有一个通用规则来决定元素的堆栈顺序？

不同情况的例子值得赞赏。一般来说：

1. 混血兄弟姐妹<div>有位置设置和无位置设置。
2. nested <div>与兄弟姐妹混血<div>有位置设置和无位置设置。

CSS 基础知识z-index财产

一个简单的概念

The z-index属性基于一个简单的概念：沿 z 轴具有较高值的​​元素将位于具有较低值的元素前面。所以如果你申请z-index: 1 to div.box1, and div.box2 has a z-index: 0, then div.box1将覆盖div.box2.

就z轴而言，它指的是三维平面上的深度。在您的计算机上，它可以被解释为物体离您越来越近和越来越远的平面。 （了解更多关于笛卡尔坐标系 https://en.wikipedia.org/wiki/Cartesian_coordinate_system.)

^{Source: Wikipedia https://es.wikipedia.org/wiki/Tridimensional}

z-index适用于定位元素

除非您正在处理弹性项目或网格项目，否则z-index属性仅适用于定位元素。这意味着您可以使用z-index在元素上position: absolute, position: relative, position: fixed or position: sticky。如果该元素有position: static（默认值），或其他一些定位方案，例如float, then z-index不会有任何影响。

如前所述，尽管z-index，如定义CSS 2.1 https://www.w3.org/TR/CSS2/visuren.html#z-index，仅适用于定位元素，弹性项目 https://www.w3.org/TR/css-flexbox-1/#painting and 网格项目 https://drafts.csswg.org/css-grid/#z-order即使在以下情况下也可以创建堆叠上下文position is static.

4.3.弹性项目 Z 顺序 https://www.w3.org/TR/css-flexbox-1/#painting

Flex 项目的绘制与内联块完全相同，只是使用顺序修改的文档顺序来代替原始顺序 文件顺序，以及z-index以外的值auto创建一个堆叠上下文，即使position is static.

5.4. Z 轴排序：z-index财产 https://drafts.csswg.org/css-grid/#z-order

网格项的绘制顺序与内联块完全相同，只是顺序修改的文档顺序是 用于代替原始文件订单，以及z-index以外的值auto创建一个堆叠上下文，即使position is static.

这是一个演示z-index处理非定位的弹性项目：https://jsfiddle.net/m0wddwxs/ https://jsfiddle.net/m0wddwxs/

堆叠上下文

一旦一个元素被定位并且z-index应用后，将创建堆栈上下文。

（另请参阅：创建堆栈上下文的情况的完整列表。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)

堆叠上下文是一组用于管理定位元素的规则z-index，及其后代。这些规则控制子元素在堆叠顺序以及财产的影响范围。

本质上，堆叠上下文限制了z-index作用域为元素本身，其子元素不能影响另一个堆叠上下文中元素的堆叠顺序。

如果您曾经尝试申请越来越高z-index值只是发现该元素永远不会移到前面，您可能试图在不同的堆叠上下文中覆盖一个元素。

具有共同父级的向前或向后移动的元素组 按堆叠顺序一起组成所谓的堆叠 语境。充分理解堆叠上下文是真正实现的关键 掌握 z-index 和堆叠顺序的工作原理。

每个堆叠上下文都有一个 HTML 元素作为其根元素。 当元素上形成新的堆叠上下文时，该堆叠 context 将其所有子元素限制在特定位置 堆叠顺序。这意味着如果一个元素包含在 堆叠上下文在堆叠顺序的底部，没有办法 让它出现在另一个元素的前面 即使使用堆栈顺序较高的堆栈上下文 z-index 十亿！

~ 没人告诉你关于 Z-Index 的事 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

堆叠顺序

CSS 在页面上布局元素时遵循堆叠顺序。这些是没有时的堆叠规则z-index指定，从最远到最近：

1. 根元素的背景和边框
2. 非定位、非浮动块元素，按照它们在源代码中出现的顺序排列
3. 非定位浮动元素，按照它们在源代码中出现的顺序排列
4. 行内元素
5. 定位元素，按照它们在源代码中出现的顺序

If a z-index应用属性，修改堆叠顺序：

1. 根元素的背景和边框
2. 定位元素z-index小于 0
3. 非定位、非浮动块元素，按照它们在源代码中出现的顺序排列
4. 非定位浮动元素，按照它们在源代码中出现的顺序排列
5. 行内元素
6. 定位元素，按照它们在源代码中出现的顺序
7. 定位元素z-index大于 0

Source: W3C http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

底线：一旦你理解了堆叠上下文，z-index简单。

例如z-index实际行动请参阅：z-index 是如何工作的！ http://www.cssmojo.com/extras/everything_you_always_wanted_to_know_about_z-index_but_were_afraid_to_ask/

一篇简短但内容丰富的文章解释了z-index（包括如何opacity影响堆叠顺序）请参阅：没人告诉你关于 Z-Index 的事 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

完整的概要z-index，有很多示例和插图，请参阅：MDN 理解 CSSz-index https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

要深入了解堆叠上下文，请阅读：W3C 堆叠上下文的详细描述 https://www.w3.org/TR/CSS22/zindex.html