覆盖透明区域的 div答案

【问题标题】：Overlay div with transparent area覆盖透明区域的 div
【发布时间】：2013-12-23 15:14:33
【问题描述】：

我正在尝试在网页上实现一种效果，即我在页面上的所有元素上都有一个半透明的覆盖，除了一个特定的 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 的实际操作。我希望 green div (#d3) 在叠加层顶部可见。

有没有什么方法可以在不将position:absolute 添加到#d3 或修改DOM 的情况下实现这一点？如果没有可用的纯 CSS3 解决方案，我的目标是最新版本的 Chrome，并且我对 Javascript/jQuery 解决方案持开放态度

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

演示：Fiddle

见this answer

【讨论】：

您应该真正解释一下为什么会这样。另外，z-index:1 已经足够好了。

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

这是为什么它起作用的解释：“z-index 只有在设置了 position 属性时才会起作用。”

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

【讨论】：