CSS z-index not working properly -

CSS z-index not working properly -

say have following:

<div id="fader"></div> <div id="wrapper"> <div class="content">blah blah</div> <div class="content">blah blah</div> <div class="content"> <div id="form">form goes here</div> </div> <div id="form2">form goes here</div>

now #form invisible until button clicked. @ point, want fader black out entire page, , #form shows up.

i have working using position: absolute , right z-index. now, #wrapper set z-index lower #fader's z-index. want #form z-index higher #fader, still within #wrapper! there anyway this?

thanks

z-index applies positioned elements.

http://jsfiddle.net/sskzs/1/

#wrapper {z-index: 1; position: relative;} #fader {z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%;} #form2 {z-index: 3; position: absolute;}

css z-index