與透明區域覆蓋div

我試圖實現一個網頁上的效果，我有一個頁面上的所有元素半透明覆蓋，除了一個特定的div。與透明區域覆蓋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，很開放爲Javascript/jQuery的解決方案是否有可用

來源

2013-12-23 CodingIntrigue

使用position: relative爲#d3爲z-index沒有純CSS3解決工作

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

演示：Fiddle

見this answer

來源

2013-12-23 15:17:51

你應該真的解釋爲什麼這會起作用。而且，'z-index：1'已經足夠了。 – andyb

對於我來說，outline property是在CSS中添加周圍的任何元素疊加的最簡單方法。

沒有必要的z-index，只需添加以下代碼：

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

我創建了jsFiddle演示。

祝您有個美好的一天， Thomas。

來源

2013-12-23 15:59:10 tzi

這是對此原因的解釋：「z-index只有在position屬性設置好的情況下才會起作用。」

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

來源

2013-12-23 19:08:28

與透明區域覆蓋div

回答

相關問題