如何在CSS中使用z索引

使用时面临的挑战之一CSS定位对于网页布局，您的某些元素可能会重叠其他元素。如果您想要的最后一个元素html最重要的是，如果您不这样做，如果您想拥有当前不重叠其他元素的元素，该怎么办“分层”外观？为了更改元素重叠的方式，您需要使用CSS的Z-Index属性。

如果您在Word和PowerPoint中使用了图形工具或更强大的图像编辑器Adobe Photoshop，那么您很可能看到了类似Z索引的事情。在这些程序中，您可以突出显示所绘制的对象，然后选择一个选项发送回或者放在前面文档的某些元素。在Photoshop中，您没有这些功能，但是您确实具有程序的“图层”窗格，并且可以通过重新安排这些层来安排元素落在画布上的位置。在这两个示例中，您本质上是设置这些对象的z索引。

什么是z索引？

当您使用CSS定位将元素定位在页面上时，您需要在三个维度上进行思考。有两个标准维度：左/右和顶部/底部。左至右索引称为X索引，而顶部到底部为Y索引。这就是您使用这两个索引水平或垂直定位元素的方式。

到那个时刻网页设计，页面上还有堆叠顺序。页面上的每个元素都可以在任何其他元素上方或下方分层。Z-Index属性确定每个元素在堆栈中的位置。如果X索引和Y索引是水平和垂直线，则z索引是页面的深度，本质上是第三维。

将网页上的元素视为纸张和网页本身作为拼贴。铺设纸张的地方是通过定位确定的，其他元素覆盖了多少是z索引。

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

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

如何使用z索引

给您想要在堆栈中的每个元素一个不同的z指数值。例如，如果您有五个不同的元素：

• 元素A - -25的z索引
• 元素B - 82的z索引
• 元素c - z索引未设置
• 元素D - z索引10
• 元素E - -3的z索引

他们将按以下顺序堆叠：

1. 元素b
2. 元素d
3. 元素c
4. 元素e
5. 元素a

建议使用巨大不同的z指数值来堆叠您的元素。这样，如果稍后在页面上添加更多元素，则可以将它们分层的空间无需调整所有其他元素的z索引值。例如：

• 最高元素100
• 0对于您的中间元素
• -100用于您的底部元素

您还可以给出两个元素相同的z索引值。如果这些元素被堆叠，它们将以将其写入HTML的顺序显示，最后一个元素在顶部。