了解 z-index

在最基本的情况下，HTML 页面可以被认为是二维的，因为文本、图像和其他元素在页面上排列，不会重叠。在这种情况下，只有一个渲染流，所有元素都感知其他元素占用的空间。z-index 属性允许您在渲染内容时调整对象分层顺序。

在 CSS 2.1 中，每个盒子都有一个三维位置。除了水平和垂直位置外，盒子还沿“z 轴”排列，并在彼此之上进行格式化。z 轴位置在盒子视觉上重叠时尤其重要。

(来自 CSS 2.1 第 9.9.1 节 - 分层演示)

这意味着 CSS 样式规则允许您在除默认渲染层（层 0）之外的层上放置盒子。每个层在假想的 z 轴上的位置用一个整数表示，表示渲染的分层顺序。数字越大，表示越靠近观察者。使用 CSS z-index 属性控制该 z 轴上的位置。

使用 z-index 似乎非常容易：一个属性分配一个具有易于理解的行为的单个整数。当 z-index 应用于复杂的 HTML 元素层次结构时，它的行为可能难以理解或预测。这是由于复杂的分层规则。事实上，CSS 规范中专门有一节专门用来解释这些规则 CSS-2.1 附录 E。

本指南将尝试解释这些规则，并进行一些简化和示例说明。