即使是2D元素，我们的第三维，z轴，表示堆叠顺序。换句话说，哪些元素堆叠或重叠在其他元素之上?改变z-index并不会移动元素。这不是控制真正的深度。但z索引确实能帮助我们在堆叠元素时定位元素。
本质上，z指数值较高的元素显示在z指数值较低的元素之上。有几点需要注意:
如果我们有两个元素(每个元素都有子元素)，z-index将控制这些父元素的堆叠。但是如果元素A的z指数比元素B高呢?元素B的子元素永远不能与元素a的任何部分重叠，即使z指数是7000亿。
让我们在Designer中查看这个。三个div块，并排。我们的目的是让中间的div块与外面的div块重叠。正常的堆叠顺序是第一个在最下面;第二个在上面，第三个在上面。
让我们选择中间的div块，它被设置为相对定位(请记住，z-index只在相对、绝对和固定定位上可用)。设z指数为1。现在它堆在上面了!这是因为默认的z指数是0。请记住，将z-index设置为负值意味着我们可能会失去元素的可见性，因为它会被渲染在大多数元素的下面。
我们选择左边的，设z指数为2。会发生什么?就像我们在AP微积分课上学过的，2大于1。当然，它会叠在上面。让我们选一个正确的。也把它设置为2。或3。没关系。它大于中间的div块，后者的z索引为1。如果我们把中间的数设为4? You get the idea.
所以,z - index。我们可以控制元素的堆叠顺序，将较高的值堆叠在较低的值之上。
