一、什么是z-index
z-index是CSS中控制元素堆叠位置的属性，定义元素在堆叠上下文中的层级关系，数值越大代表越靠上（更靠近屏幕用户），数值越小代表越靠下（更靠近文档）
二、如何设置z-index
设置z-index需要注意以下几点：
1. 只有指定position属性值为relative、absolute、fixed的元素才能设置z-index。
2. 父元素的z-index不能超过子元素的z-index，如果一个元素有子元素，那么子元素的z-index要比父元素的z-index小，否则会被父元素覆盖。
3. z-index的值只有在同一个堆叠上下文中才有意义，不同堆叠上下文中的z-index值无法比较。
4. 为了避免z-index值太高造成麻烦，建议z-index值不要超过100000。
下面是两个例子：
<style>
.box1 {
position: relative;
z-index: 1;
}
.box2 {
position: relative;
z-index: 2;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
上面的例子中，box2的z-index值比box1的大，所以box2在堆叠上下文中更靠上。
<style>
.box1 {
position: relative;
z-index: 2;
}
.box2 {
position: relative;
z-index: 1;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
上面的例子中，box2的z-index值比box1小，但是box2是box1的子元素，所以输出时，box1比box2更靠上，box2被box1盖住了。
三、常见问题
1. z-index失效
通常情况下，z-index会出现失效的问题，需要考虑如下因素：
1.1 父级元素的z-index是否大于子元素的z-index
1.2 position属性是否设定为relative、absolute、fixed。
1.3 在已定位的元素上设置z-index属性。
1.4 元素是否处于相同的堆叠上下文中。
1.5 svg元素的z-index与其他元素不同。
2. z-index如何避免冲突
2.1 仔细规划层级结构，减少不必要的z-index设置。
2.2 可以给父元素设定z-index的值避免冲突。
2.3 尽量使用半透明色而不是z-index设置窗口效果。
3. z-index的注意事项
3.1 z-index高度不易滥用，易滋生层滥用的噪声。
3.2 必须理解z-index堆栈概念和优先级。
3.3 切勿在仅为定位目的使用z-index。
四、总结
在开发过程中，使用z-index设置元素堆叠位置很常见，但需要注意设置的数值大小和父子元素堆叠上下文关系，避免出现z-index失效的问题。同时，合理规划层级结构能够避免z-index冲突，并且需要注意z-index的使用原则，不要滥用。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/187859.html
微信扫一扫 
支付宝扫一扫 