使用CSS定位进行网页布局时的一个挑战是，您的某些元素可能会与其他元素重叠。如果您希望HTML中的最后一个元素位于顶部，那么这可以正常工作，但是如果您不想要或者如果您希望拥有当前不与其他元素重叠的元素，那么这样做是因为设计需要这种“分层”外观？为了改变元素重叠的方式，你需要使用CSS的属性。
如果您在Word和PowerPoint中使用过图形工具或者像Adobe Photoshop这样使用更强大的图像编辑器，那么您很可能会看到类似z-index的内容。在这些程序中，您可以突出显示已绘制的对象，并选择“发送到后面”或“置于前面”文档的某些元素的选项。在Photoshop中，您没有这些功能，但是您确实拥有程序的“图层”窗格，您可以通过重新排列这些图层来排列元素落在画布上的位置。在这两个示例中，您基本上都是设置这些对象的z-index。
什么是Z指数？
当您使用CSS定位在页面上定位元素时，您需要考虑三维。有两个标准尺寸：左/右和上/下。从左到右的索引称为x索引，而从上到下的索引称为y索引。这是使用这两个索引水平或垂直定位元素的方法。
在网页设计方面，还有页面的堆叠顺序。页面上的每个元素可以分层在任何其他元素的上方或下方。 z-index属性确定每个元素在堆栈中的位置。如果x-index和y-index是水平和垂直线，那么z-index是页面的深度，基本上是第三维。
将网页上的元素视为纸张，将网页本身视为拼贴。你放置纸张的位置取决于定位，其他元素覆盖了多少是z-index。
- z指数是正数（例如100）或负数（例如-100）。
- 默认的z-index为0。
具有最高z-index的元素位于顶部，接着是下一个最高位置，依此类推至最低z-index。如果两个元素具有相同的z-index值（或者未定义，意味着使用默认值0），则浏览器将按照它们在HTML中出现的顺序对它们进行分层。
如何使用Z-Index
为堆栈中的每个元素提供不同的z-index值。例如，如果您有五个不同的元素：
- 元素A-z-index为-25
- 元素B - z指数为82
- 元素C - z-index未设置
- 元素D - z指数10
- 元素E - z指数-3
它们将按以下顺序堆叠：
- 元素B.
- 元素D.
- 元素C.
- 元素E.
- 元素A.
建议使用截然不同的z-index值来堆叠元素。这样，如果稍后向页面添加更多元素，则可以将其分层，而无需调整所有其他元素的z-index值。例如：
- 100为你最顶层的元素
- 0为你的中间元素
- -100表示您的底部元素
您还可以为两个元素提供相同的z-index值。如果这些元素是堆叠的，它们将按照它们在HTML中编写的顺序显示，最后一个元素位于顶部。
注意：要使元素有效地使用z-index属性，它必须是块级元素，或者在CSS文件中使用“block”或“inline-block”的显示。
