z-index是CSS中一个非常重要的属性，它可以控制页面上元素的层次关系。通过设置元素的z-index值，我们可以将某个元素排在另一个元素的上方或下方，以此形成页面中元素的层叠效果。本文将从以下几个方面详细阐述z-index属性的使用方法和注意事项。
一、基本用法
z-index属性的值是一个数字，表示元素的层级，数值越大的元素越靠近页面的顶层。在设置z-index属性时，需要注意以下几点：
1、z-index可以是正值，也可以是负值。
2、z-index只有在position属性的值为relative、absolute、或fixed时才有用。
3、z-index的默认值是0，如果某个元素没有设置z-index属性，则该元素会被放置在其他有z-index属性的元素下面，但在没有设置z-index属性的元素上边。
下面是一个简单的例子：
<style>
.box1 {
position: relative;
z-index: 2;
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
position: relative;
z-index: 1;
width: 150px;
height: 150px;
background-color: green;
top: -100px; /* 上移100像素 */
left: 50px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
上面的例子中，两个盒子都是relative定位，但box1的z-index值比box2大，所以box1会覆盖在box2上面。box2的top属性设置为-100px，让它上移了100像素，这样就可以看出box1在上方了。结果如下图所示：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/151536.html
微信扫一扫 
支付宝扫一扫 