本文介绍了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
发布评论