Overlay div with transparent area

Question

I'm trying to achieve an effect on a webpage whereby I have a semi-transparent overlay over all elements on a page, except for one specific div.

This is an example of my page structure:

<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>

And here is a fiddle of the above in action. I would like the green div ( #d3 ) to be visible on top of the overlay.

Is there any way of achieving this without adding position:absolute to #d3 or modifying the DOM? I am targeting the latest version of Chrome here and am open to Javascript/jQuery solutions if there is no pure-CSS3 solution available

Answer 1

use position: relative for #d3 for the z-index to work

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

Demo: Fiddle

See this answer

Answer 2

For me, the outline property is the simplest way to add an overlay around any element in CSS.

No need of z-index, just add the following code:

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

I created a demo on jsFiddle .

Have a nice day, Thomas.

Answer 3

This is the explanation of why this works: "The z-index will only work if the position property is set as well."

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