我试图在网页上实现一种效果,在该网页上,除一个特定的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

10-05 20:54
查看更多