使用CSS定位进行网站布局可以做到某些元素与其他元素重叠。如果你想让HTML中的最后一个元素位于顶部，那么这种方法很好，但是如果你不想要或者如果你想拥有当前不与其他元素重叠的元素会这样做，因为设计要求这种“分层”的外观。为了改变元素重叠的方式，你需要使用CSS的z-index属性。
如果您在Word和PowerPoint中使用过图形工具，或者在Adobe Photoshop中使用更强大的图像编辑器，那么您很可能会看到类似z-index的内容。在这些程序中，您可以突出显示已绘制的对象。在Photoshop中，没有这些功能，但是您确实拥有程序的“图层”窗格，您可以通过重新排列这些图层来排列元素落在画布上的位置。在这两个示例中，您基本上都是设置这些对象的z-index。
当您使用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中出现的顺序对它们进行分层。