用透明区域覆盖div

Question

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

这是上述操作的小提琴 。 我希望绿色 div（ #d3 ）在叠加层顶部可见。

有什么方法可以实现而无需在#d3添加position:absolute或修改DOM？ 我将此处的最新版本定位为Chrome，如果没有纯CSS3解决方案，可以使用Javascript / jQuery解决方案

Answer 1

使用position: relative #d3 position: relative以使z-index工作

#d3 {
    background: green;
    z-index: 9999999;
    position: relative;
}

演示： 小提琴

看到这个答案

Answer 2

对我来说， outline属性是在CSS中的任何元素周围添加覆盖的最简单方法。

无需z-index，只需添加以下代码：

.myElement {
    outline: 99999px solid rgba(0, 0, 0, 0.5)
}

我在jsFiddle上创建了一个演示。

祝你有美好的一天，托马斯。

Answer 3

这就是为什么这样做的解释：“仅当位置属性也被设置时，z-index才起作用。”

参见http://webdesign.about.com/od/styleproperties/p/blspzindex.htm等。