我们希望找到一种解决方案,只显示背景前面的绿色框(#back)。这无需修改 html。
.HTML:
<div id="body" style="z-index:1;position:relative;">
<div id="div1" style="z-index:4;position:relative;">
</div>
<div style="z-index:4;background-color: red; width: 70px;position:relative;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
<div id="back" style="z-index:5;">
</div>
</div>
.CSS:
#body {
background-color: blue;
width: 500px;
height: 500px;
position: relative;
}
#div1 {
position:relative;
background-color: white;
width: 100px;
height: 100px;
}
#back {
position: absolute;
top:0;
width: 100%;
height: 100%;
opacity: 0.7;
background-color: black;
}
div {
width: 50px;
height: 50px;
}
我们的问题有一个小提琴:
https://jsfiddle.net/ruj23c60/3/
<div style="z-index:4;background-color: red; width: 70px;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
从#div2
的父级中删除样式position: relative
就足够了
据我所知,有两种方法。
第一:
你需要给#back
z-index:3
.(小于#div2
父div)然后你可以把它放在前面#back
但这样整个div都出现在黑色(#back
)div的前面。小提琴
第二:
position:adsolute;
#div2
并从其父级中删除position:relative;
。小提琴
注意:我有来自#back
的评论opacity: 0.7;
,以正确理解。