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