html如何设置图层间的层次,CSSLayers（层级）
CSS Layers(层级)
css怎么创建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 值实现层重叠顺序排列。