html如何设置图层间的层次,CSS Layers(层级)

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值实现层重叠顺序排列。