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;
}