Help with light box style overlay

[rondog]

Ok Here is my situation. I have a drop down menu that runs into my flash movie. I need to set my window mode for the flash movie to either opaque or transparent. The problem with that is, when I turn my overlay on, the flash movie is now behind the over lay. The flash movie needs to be the only thing on top of the overlay. I am trying to play with z-index to make the flash movie above the overlay but its not working. Any ideas?? Here is my code/css:

channelsswf is obviously my SWF and black/fader is my overlay.

<div id="mainbgholder">
  <div align="center" id="channelsswf">
    <script type="text/javascript">
        // <![CDATA[
        var so = new SWFObject("newCourse.swf", "vforum", "800", "370", "9", "#222222");
	so.addParam("allowfullscreen", "true");
	so.addParam("wmode","opaque");
	so.addParam("allowScriptAccess", "always");
        so.write("channelsswf");
        // ]]>
      </script>
  </div>
  <div id="black" class="fader"></div>
  <div id="bottombg"></div>
</div>

 

css:

#channelsswf {
z-index: 1002;
background: #222;
}
.fader {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height: 100%;
background-color: #000;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}

[SuperBlue]

The z-indez property only works on positioned elements, this means that you may want to consider applying position: relative; to your channelsswf class.

 

Also theres no reason to use insane values, not that it dose any harm, but it may easily become confusing later on.