上一章CSS高级教程请查看:css position定位属性
CSS z-index属性可以与position属性结合使用,创建像Photoshop这样的图层效果。
使用z-index属性在层中叠加元素通常HTML页面被认为是二维的,因为文本、图像和其他元素被安排在页面上而没有重叠。然而,除了它们的水平和垂直位置,盒子也可以沿着z轴堆叠,即使用CSS
z-index属性将一个盒子叠在另一个上面。此属性指定position值为absolute, fixed或relative方框的堆栈级别。
每层的z轴位置用整数表示,表示渲染的堆叠顺序。具有较大z-index的元素与具有较小z-index的元素重叠。
【css图层z-index元素叠加 –
CSS高级教程】z-index属性可以帮助你创建更复杂的网页布局。下面的示例演示了如何在CSS中创建层。
.box {
position: absolute;
left: 10px;
top: 20px;
z-index: 2;
}
推荐阅读
- css浮动属性float – CSS高级教程
- css position定位属性 – CSS高级教程
- css元素的可视属性visibility – CSS高级教程
- css display显示属性 – CSS高级教程
- css可视格式化模型 – CSS高级教程
- css属性单位 – CSS高级教程
- css维度属性 – CSS高级教程
- css内容溢出处理 – CSS高级教程
- css光标cursor属性和样式 – CSS高级教程