CSS Z Index

网页上的组件堆叠顺序通常使用 CSS 的“z-index”属性来管理。“堆叠”是指组件在网页上相互叠加的视觉排列和层叠。当网页上的许多组件共享同一区域时，堆叠顺序决定了哪个元素显示在前面，哪个元素显示在后面。

Z 轴，有时也称为网页的深度或“第三维度”，由 Z-index 控制，它控制项目如何相互堆叠和呈现。

示例

在上面的例子中，`.box` 元素将由于其较高的 `z-index` 值而在 `.container` 元素内的其他元素之上进行分层。

Z Index 的高级概念

1. 堆叠上下文 (Stacking Contexts): 当一个元素被赋予 `z-index` 值时，它会创建一个堆叠上下文。每个堆叠上下文都是一个独立的层，并且在一个堆叠上下文内的元素仅在确定其堆叠顺序时才相互比较。
2. 堆叠顺序 (Stacking Order): 堆叠顺序决定了元素在一个堆叠上下文中的分层方式。以下三个因素决定了堆叠顺序：
   • 具有较高 `z-index` 值的堆叠上下文放置在具有较低值的堆叠上下文之上。
   • 如果两个元素具有相同的堆叠上下文，则在 HTML 结构中稍后出现的元素将显示在上面。
   • 如果两个元素具有相同的 `z-index` 值和相似的堆叠上下文，它们的堆叠顺序将由它们在 HTML 结构中出现的顺序决定。
3. 负 z-index (Negative z-index): 默认堆叠顺序或具有负“z-index”值的项将放置在具有正值值的项下方。
4. 定位上下文 (Positioning Contexts): 具有不同定位类型（`position: static`、`relative`、`absolute` 或 `fixed`）的元素会创建自己的堆叠上下文。例如，具有 `position: relative` 和 `z-index` 值的元素将在其堆叠上下文中进行分层，独立于其他堆叠上下文。
5. 粘性定位 (Sticky Positioning): 具有 `position: sticky` 的元素会根据其在文档流中的正常位置进行定位，直到达到指定的阈值。粘性元素在达到阈值之前被视为 `position: relative`，然后它们变成 `position: fixed`。具有 `position: sticky` 的元素可以具有 `z-index` 值来控制它们在堆叠上下文中的堆叠顺序。
6. 父子关系 (Parent-Child Relationship): 父元素的堆叠上下文决定了子元素的 `z-index` 值。如果父元素具有更高的“z-index”值，则子元素在该上下文中的堆叠顺序可能会发生变化。
7. 透明度和堆叠顺序 (Transparency and Stacking Order): 背景透明或不透明度值小于 1 的元素会影响重叠元素的堆叠顺序。透明或半透明区域被视为空白，允许其后面的元素可见，并可能影响堆叠顺序。