了解z-index堆叠顺序
我有点困惑于使用z-index来决定堆栈顺序。
我不太了解浏览器如何将元素的position属性与没有它的元素相关联。
是否有一个通用的规则来决定元素的堆栈顺序是否已经明确地定位元素？
不同情况下的例子，赞赏。 一般来说：
- 混合兄弟
<div>s与位置设置和没有位置设置。 - 嵌套
<div>与位置设置和位置设置的兄弟<div>s混合。
CSS z-index属性的基础知识
一个简单的概念
z-index属性基于一个简单的概念：具有较高值的元素将位于沿着z轴具有较低值的元素前面。 因此，如果将z-index: 1应用于div.box1 ，而div.box2的z-index: 0 ，则div.box1将覆盖div.box2 。
就z轴而言，它是指三维平面上的深度。 在你的计算机上，它可以被解释为物体离你更近，更远的平面。 （了解有关笛卡尔坐标系的更多信息。）
来源： 维基百科
z-index适用于定位元素
除非处理flex项目或网格项目，否则z-index属性仅适用于定位的元素。 这意味着你可以在position: absolute ， position: relative ， position: fixed或position: sticky元素上使用z-index 。 如果元素的position: static （默认值），或者像float这样的其他定位scheme，那么z-index将不起作用。
如上所述，虽然CSS 2.1中定义的z-index仅适用于定位元素，但即使position是static ， flex项目和网格项目也可以创build堆叠上下文。
4.3。 Flex Item Z-Ordering
除了用顺序修改的文档顺序代替原始文档顺序之外，Flex项目的绘制与内嵌块完全相同，即使
position是static，z-index值也不是auto创build堆栈上下文。5.4。 Z轴sorting：
z-index属性网格项目的绘制顺序与内嵌块完全相同，不同之处在于，使用顺序修改的文档顺序代替原始文档顺序，即使
position是static，z-index值也不是auto创build堆栈上下文。
这是一个z-index在非定位flex项目上的演示： https : //jsfiddle.net/m0wddwxs/
堆叠上下文
一旦定位了一个元素并应用了z-index ，就会创build一个堆叠上下文。
（另请参阅： 创build堆叠上下文的情况的完整列表。 ）
堆栈上下文是一组pipe理z-index定位元素及其后代的规则。 这些规则规定了堆叠顺序中子元素的位置和属性影响的范围。
从本质上讲，堆叠上下文将z-index范围限制为元素本身，其子元素不能影响另一个堆叠上下文中元素的堆叠顺序。
如果您曾尝试应用越来越高的z-index值来发现元素从未出现在前面，则可以尝试在不同的堆栈上下文中叠加元素。
具有在堆叠顺序中向前或向后移动的共同父元素的元素构成了所谓的堆叠上下文。 充分理解堆栈上下文是真正掌握z-index和堆栈顺序如何工作的关键。
每个堆叠上下文都有一个HTML元素作为其根元素。 当在元素上形成新的堆叠上下文时，该堆叠上下文将其所有子元素限制在堆叠顺序中的特定位置。 这意味着，如果一个元素包含在堆叠顺序底部的堆栈上下文中，则无法使其在堆叠顺序中较高的不同堆栈上下文中出现在另一个元素的前面，即使使用十亿的Z指数！
〜 没有人告诉你Z指数
堆叠顺序
在页面上布置元素时，CSS遵守堆叠顺序。 当没有指定z-index时，这些是从最远到最近的堆栈规则：
- 根元素的背景和边界
- 非定位的非浮动块元素，按它们在源代码中出现的顺序排列
- 非定位浮动元素，按照它们出现在源代码中的顺序
- 内联元素
- 定位的元素，按它们在源代码中出现的顺序排列
如果应用z-index属性，则会修改堆叠顺序：
- 根元素的背景和边界
-
z-index小于0的定位元素 - 非定位的非浮动块元素，按它们在源代码中出现的顺序排列
- 非定位浮动元素，按照它们出现在源代码中的顺序
- 内联元素
- 定位的元素，按它们在源代码中出现的顺序排列
-
z-index大于0的定位元素
来源： W3C
底线： 一旦你理解了堆叠的上下文， z-index是很容易的。
有关z-index行动的示例，请参阅： z-index如何工作！
有关z-index （包括opacity如何影响堆积顺序）的简短但非常翔实的文章，请参阅： 没有人告诉您关于Z指数
有关z-index的完整概述，以及许多示例和插图，请参阅： MDN了解CSS z-index
深入了解堆栈上下文，请阅读： W3C详细描述堆栈上下文
