CSS Layers(层级)

CSS z-index属性可以与position属性结合使用，以创建诸如Photoshop之类的图层效果。

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

通常将HTML页面视为二维页面，因为文本，图像和其他元素在页面上排列而没有重叠。但是，除了它们的水平和垂直位置外，还可以使用CSS z-index属性沿z轴堆叠盒子，也就是一个堆叠在另一个堆叠之上。该属性指定一个盒子，其堆叠水平position值是下列之一absolute，fixed或relative。

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

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

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

运行后效果如下:

我们使用z-index重叠顺序样式，在实际DIV+CSS布局时候我们需要绝对定位样式，并且可以使用left、right进行定位，通过不同z-index值实现层重叠顺序排列。