Simple HTML overlay on Flash for all major browsers

Flash embedded into a web page usually sits on top of all other content on a page. This has long caused problems especially with drop-down menus being hidden behind Flash elements in web pages.
Here a few simple steps to make sure you can place HTML elements over Flash in all major browsers (IE6-8, FireFox, Chrome, Safari and Opera).


Embed your flash
A simple way to integrate flash into your site is by following the simple documentation for SWFObject.js over at code.google.com you’ll need the swfobject files to follow this tutorial.
Using this as a basis for this example you have this code in your document head;

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
 swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>

and this code in the body to include the Flash (set your desired width/height in BOTH object tags);

<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="320">
 <param name="movie" value="test.swf" />
 <!--[if !IE]>-->
 <object type="application/x-shockwave-flash" data="test.swf" width="500" height="320">
 <!--<![endif]-->
 <div>
  <h1>Alternative content</h1>
  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
 </div>
 <!--[if !IE]>-->
 </object>
 <!--<![endif]-->
</object>

Use absolute positioning to allow Flash and HTML to overlap

By wrapping your Flash and the HTML you want to overlay in divs with 
“position:absolute” and them both in a wrapping div with 
“position:relative” as you can see below;

<div style="position:relative;"> 

 <!--HTML for overlay with absolute positioning-->
 <div style="position:absolute; background-color:#F0F;width:100px;height:100px;display:block;">
  This div will be on top of the Flash
 </div>

 <!--Wrapper for Flash content with absolute positioning-->
 <div style="position:absolute;">
  <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="320">
   <param name="movie" value="test.swf" />
   <!--[if !IE]>-->
   <object type="application/x-shockwave-flash" data="test.swf" width="500" height="320">
   <!--<![endif]-->
   <div>
    <h1>Alternative content</h1>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
   </div>
   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
  </object>
 </div>

</div>