个性化阅读
专注于IT技术分析

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;
}
赞(0)
未经允许不得转载:srcmini » css图层z-index元素叠加 – CSS高级教程

评论 抢沙发

评论前必须登录!