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