How to make a flash object render NOT in top z-level?

Question

I have a webpage with DHTML navigation menu. On the page also have an embedded flash object. Currently when I activated a DHTML menu, the opened menu items list appear below the flash.

How could I make the DHTML menu items to appear on top of the flash object. I reckon that there will be an attribute that we could use while writing or tag for the flash object.

I hope the solution will work across all major browser (Firefox3, IE6, IE7, IE8, Chrome, and Safari).

Thanks.

Answer 1

Flash objects are by default placed over top of DHTML. To make a Flash object rendered as part of the DOM and obey the appropriate z-index you need to set the wmode attribute to transparent as follows:

<div class="flashthingy"> 
  <object width="295" height="248">
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.foobar.com/" type="application/x-shockwave-flash" wmode="transparent" width="295" height="248"></embed>
  </object>
</div>

Now you can set the appropriate z-index and the Flash object should obey.