本文介绍了CSS绝对定位&Z-Index的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
假设我有以下HTML：
.wrapper {
position: relative;
z-index: 99;
}
.red, .green {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.red {
background: red;
z-index: 400;
}
.green {
background: green;
}<div class="wrapper">
<div class="red"></div>
</div>
<br>
<div class="wrapper">
<div class="green"></div>
</div>我希望红色框出现在绿色框的顶部。但它没有。.wrapper只有99的z-index，而.red有z-index: 100。顶部是否有黑客TOP PRODUCT.red？
提前感谢！
推荐答案
您不希望给包装同时包含这两个divaz-index，因为它同时包含这两个div。请删除.wrapper上的z-index。并保留400的.red类az-index，红色框将出现在绿色框的顶部：
.wrapper {
position: relative;
}
.red, .green {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.red {
background: red;
z-index: 400;
}
.green {
background: green;
}<div class="wrapper">
<div class="red"></div>
</div>
<br>
<div class="wrapper">
<div class="green"></div>
</div>这篇关于CSS绝对定位&Z-Index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！