与透明区域覆盖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

回答

相关问题