css图层z-index元素叠加 – CSS高级教程

上一章CSS高级教程请查看：css position定位属性

CSS z-index属性可以与position属性结合使用，创建像Photoshop这样的图层效果。

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

通常HTML页面被认为是二维的，因为文本、图像和其他元素被安排在页面上而没有重叠。然而，除了它们的水平和垂直位置，盒子也可以沿着z轴堆叠，即使用CSS  z-index属性将一个盒子叠在另一个上面。此属性指定position值为absolute, fixed或relative方框的堆栈级别。

每层的z轴位置用整数表示，表示渲染的堆叠顺序。具有较大z-index的元素与具有较小z-index的元素重叠。

z-index属性可以帮助你创建更复杂的网页布局。下面的示例演示了如何在CSS中创建层。

.box {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 2;
}