Lab: SWFObject

SWFObject, Flash and the z-index

Updated June 2009

Sometimes you might want your SWF to go under some page elements. This has always been a tough nut to crack for Flash developers, because the Flash Player always writes the SWF on the topmost layer of the page, regardless of z-index order. This is especially annoying for people who use CSS-based menus, such as the famous Suckerfish menu method.

The answer is to use wmode="opaque" combined with positioning in your CSS.

Start by establishing the position relationship between the element you want to place over the SWF (we'll call this the overlay element) and its parent. I won't get into how CSS positioning works; it's covered well enough on other sites, such as CSS-Tricks.

In the examples presented here, the SWF will be embedded in a div that has a wrapper div. This wrapper div has established its position through the declaration position: relative; which allows us to control the overlay's placement via position: absolute.

#wrapper { position: relative; }

#overlay { position: absolute; }

/* 
    Look ma, no code!
    We don't need to specify any
    CSS for the Flash SWF's <object>.
*/

#flash { }

Next, make sure the wmode is set to "opaque". SWFObject 2.x's dynamic publishing method makes this a breeze; just add the parameter to the "params" object:

 <script type="text/javascript">
	
   var flashvars = {};
   var params = { wmode: "opaque" };
   var attributes = {};
	
   swfobject.embedSWF("movie.swf", "flash", "550", "400", "7",
                      "expressinstall.swf", flashvars, params, attributes);

</script>

Setting wmode with SWFObject 2.x's static publishing is equally easy:

<object id="flashcontent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
   <param name="movie" value="movie.swf" />
   <param name="wmode" value="opaque" />
   
   <!--[if !IE]>-->
   <object type="application/x-shockwave-flash" data="movie.swf" width="550" height="400">
   <param name="wmode" value="opaque" />
   <!--<![endif]-->
   
      <p>Please update your Flash Player</p>
   
   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->

</object>

Reminder: SWFObject's static publishing requires setting the the wmode param for each object.

Working examples: static publishing | dynamic publishing (tested in Firefox 3, IE 6, and Safari 4).

Update: For those of you familiar with my older Suckerfish examples, it turns out they work NOT because of z-index being specified, but rather because the Suckerfish menu's CSS had established position relationships with the various markup elements. All the Suckerfish examples needed (beyond the original Suckerfish CSS) was to enable Flash's wmode (wmode="opaque"). See the Suckerfish examples here: static publishing | dynamic publishing.

pipwerks

Lab: SWFObject

SWFObject, Flash and the z-index