CSS 图层

CSS z-index 属性可以与 position 属性结合使用，以创建像 Photoshop 一样的图层效果。

使用 z-index 属性在层中堆叠元素

通常 HTML 页面被认为是二维的，因为文本、图像和其他元素在页面上排列而不会重叠。 但是，除了它们的水平和垂直位置之外，还可以使用 CSS z-index 属性沿 z 轴堆叠框，即一个在另一个之上。 此属性指定 position 值为 absolute, fixed, 或 relative 之一的框的堆栈级别。

每一层的 z 轴位置表示为一个整数，表示渲染的堆叠顺序。 z-index 较大的元素与较小的元素重叠。

z-index 属性可以帮助您创建更复杂的网页布局。 以下是展示如何在 CSS 中创建图层的示例。

.box {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 2;
}