用透明区域叠加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>

以上是fiddle以上的行动。我希望绿色 div（#d3）在叠加层顶部可见。

有没有办法在不将position:absolute添加到#d3或修改DOM的情况下实现此目的？我在这里定位最新版本的Chrome，如果没有可用的纯CSS3解决方案，我会对Javascript / jQuery解决方案开放

Answer 1

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

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

演示：Fiddle

请参阅this answer

Answer 2

对我来说，outline property是在CSS中任何元素周围添加叠加层的最简单方法。

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

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

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

祝你有愉快的一天， 托马斯。

Answer 3

这是对其工作原理的解释：“z-index仅在设置了position属性时才有效。”

见http://webdesign.about.com/od/styleproperties/p/blspzindex.htm et.al。