Post edited to include swfobject code as well as per eddieb’s suggestion
When building websites that use HTML and Flash, you may find that the flash movie appears above other your other content such as drop down menus, div boxes and shadow-boxes. It can happen even if you manually enter in the z-index of those elements.
It can be very frustrating when this happens and the reason this occurs is that DHTML uses layers to decide which elements stack in front of others. Just as a stack of cards are layered on top of each other. Content like Java or Flash that is embedded into the page ignores the layer order and is by default rendered on the highest layer of the page.
Back in the early days, older browsers were stuck with this issue but luckily most browsers these days have the ability to layer the embedded content along with the rest of your elements. All you need to do to layer your flash movie is to set the `WMODE` parameter to `transparent` and now it will obey your layering which is controlled by the swf’s z-index. Other values for WMODE are ‘window’ (default), ‘opaque’, or ‘transparent’.
I will show you two ways on how to enable WMODE when embedding flash in your website.
1st option – Inline Embedding
To set the `WMODE` you need to set it in two place which I have highlighted yellow in the below example.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="380" height="190" id="YourFlashMovie" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="AS3_File_Upload2.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="bgcolor" value="#333333" /> <embed src="YourFlashMovie.swf" quality="high" wmode="transparent" bgcolor="#333333" width="380" height="190" name="YourFlashMovie" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
Now all you need to do is place the flash movie where you want it and optionally set z-index to override the layer it appears on.
After downloading the swfobject.js from google code, include it into your page using.
And then execute the function as shown below but ensure that you set the param to include `WMODE` as highlighted yellow.