在网页布局中使用CSS定位时的一个挑战是，某些元素可能与其他元素重叠。如果您希望HTML中的最后一个元素位于顶部，那么这很好，但是如果您不希望，或者如果您希望当前没有与其他元素重叠的元素位于顶部，那么该怎么办，因为设计需要这种“分层”外观呢？为了改变元素重叠的方式，您需要使用CSS的z-index属性。

如果您在Word和PowerPoint中使用过图形工具，或者使用过像Adobe Photoshop这样更强大的图像编辑器，那么很可能您已经看到了z-index这样的功能。在这些程序中，您可以高亮显示已绘制的对象，并选择一个选项将文档的某些元素发送到后面或带到前面。在Photoshop中，您没有这些功能，但是您有程序的“层”窗格，您可以通过重新排列这些层来安排元素落在画布上的位置。在这两个示例中，基本上都是设置这些对象的z索引。

什么是z指数(z-index)？

当您使用CSS定位来定位页面上的元素时，您需要从三维角度进行思考。有两个标准尺寸：左/右和上/下。从左到右的索引称为x索引，而从上到下的索引称为y索引。这就是使用这两个索引水平或垂直放置元素的方式。

当涉及到网页设计时，还有页面的堆叠顺序。页面上的每个元素都可以在任何其他元素之上或之下分层。z-index属性确定每个元素在堆栈中的位置。如果x-index和y-index是水平线和垂直线，那么z-index是页面的深度，本质上是第三维。

把网页上的元素想象成一张纸，把网页本身想象成一幅拼贴画。放置纸张的位置取决于位置，其他元素覆盖了多少纸张是z索引。

• z指数是一个数字，可以是正（如100）或负（如-100）。
• 默认的z索引为0。

z索引最高的元素位于顶部，其次是次高的元素，依此类推，直到z索引最低的元素。如果两个元素具有相同的z索引值（或未定义，表示使用默认值0），浏览器将按照它们在HTML中的显示顺序对其进行分层。

如何使用z索引

为堆栈中需要的每个元素指定不同的z索引值。例如，如果有五个不同的元素：

• 元素A-z-指数为-25
• 元素B-z指数为82
• 未设置元素C-z索引
• 元素D-z指数为10
• 元素E-z-指数为-3

它们将按以下顺序堆叠：

1. 元素B
2. 元素D
3. 元素C
4. 元素E
5. 元素A

建议使用截然不同的z索引值来堆叠元素。这样，如果您以后向页面添加更多元素，您就有空间将它们分层，而不必调整所有其他元素的z索引值。例如：

• 100为您的顶级元素
• 0表示中间元素
• -100为您的底部元素

还可以为两个元素指定相同的z索引值。如果这些元素堆叠在一起，它们将按照在HTML中写入的顺序显示，最后一个元素位于顶部。

为了有效地使用z指数属性，元素必须是块级元素，或者在css文件中使用“块”或“内联块”的显示。