CSS Layers(層級)

CSS z-index屬性可以與position屬性結(jié)合使用，以創(chuàng)建諸如Photoshop之類的圖層效果。

使用z-index屬性在圖層中層疊元素

通常將HTML頁面視為二維頁面，因?yàn)槲谋?，圖像和其他元素在頁面上排列而沒有重疊。但是，除了它們的水平和垂直位置外，還可以使用CSS z-index屬性沿z軸堆疊盒子，也就是一個堆疊在另一個堆疊之上。該屬性指定一個盒子，其堆疊水平position值是下列之一absolute，fixed或relative。

每層的z軸位置均表示為表示渲染的堆疊順序的整數(shù)。較大z-index的元素與較低的元素重疊。

一個z-index屬性可以幫助您創(chuàng)建更復(fù)雜的網(wǎng)頁布局。以下是顯示如何在CSS中創(chuàng)建圖層的示例。

.box{
  width: 150px;
  height: 150px;
  opacity: 0.9;
  position: absolute;                       
  top: 30px;
  left: 30px;
}
.red{
  background: #ff0000;
  z-index: 1;
}
.green{
  background: #00ff00;
  z-index: 2;
}
.blue{
  background: #0000ff;
  z-index: 3;
}

運(yùn)行后效果如下:

我們使用z-index重疊順序樣式，在實(shí)際DIV+CSS布局時候我們需要絕對定位樣式，并且可以使用left、right進(jìn)行定位，通過不同z-index值實(shí)現(xiàn)層重疊順序排列。