用透明區域覆蓋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等。