CSS z-index属性可以与position属性结合使用,以创建诸如Photoshop之类的图层效果。
通常将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值实现层重叠顺序排列。