我试图在网页上实现一种效果,在该网页上,除一个特定的div之外,页面上的所有元素都具有半透明的覆盖层。
这是我的页面结构的一个示例:
<div id="d1">
<div id="d2"></div>
<div id="left"></div>
<div id="d3"></div>
<div id="right"></div>
<div id="d4"></div>
</div>
<div id="overlay"></div>
这是上述操作的fiddle。我希望绿色div(
#d3
)在叠加层顶部可见。有什么方法可以在不向
position:absolute
添加#d3
或修改DOM的情况下实现此目的?我将此处的最新版本定位为Chrome,如果没有纯CSS3解决方案,可以使用Javascript / jQuery解决方案 最佳答案
使用position: relative
表示#d3
以使z-index
正常工作
#d3 {
background: green;
z-index: 9999999;
position: relative;
}
演示:Fiddle
见this answer