Stop flash movie from ignoring z-index order, overlapping html and stacking on top most layer

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.

2nd option – swfobject (javascript include function)
Alternatively, you can use swfobject and specify similar parameters to acheive the same effect. Swfobject is a javascript file available free from http://code.google.com/p/swfobject/ and can be used to simplify the process of embedding flash into your website.

After downloading the swfobject.js from google code, include it into your page using.

<script type="text/javascript" src="swfobject.js"></script>

And then execute the function as shown below but ensure that you set the param to include `WMODE` as highlighted yellow.

<script type="text/javascript">

var flashvars = {};
var params = {wmode:'transparent'};
var attributes = {};

// divContainer is the div block that will then hold the embedded flash object.
swfobject.embedSWF("flashFile.swf", "divContainer", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

</script>

14 Responses to Stop flash movie from ignoring z-index order, overlapping html and stacking on top most layer

  1. avatar Angeline Logemann says:

    Hello, I stumbled on your page from digg. It is not an article I would regularly read, but I loved your thoughts on it. Thanx for creating a blog post worth reading!

  2. avatar Steve says:

    Great article, works very well … nice thanks

  3. [...] Stop flash movie from ignoring z-index order, overlapping html and … [...]

  4. [...] Stop flash movie from ignoring z-index order, overlapping html and … [...]

  5. [...] Stop flash movie from ignoring z-index order, overlapping html and … [...]

  6. [...] Stop flash movie from ignoring z-index order, overlapping html and … [...]

  7. avatar Anonymous says:

    Right on!

  8. avatar Eddie says:

    Perfect! If using with swfobject (as you should be!) then simply add in your “var params” entry

    wmode : “transparent”

  9. [...] Stop flash movie from ignoring z-index order, overlapping html and stacking on top most layer – Most web developer would have come across the frustration of trying to build a website and then have flash overlap your content and break your design. See how you can work around this and make flash behave as it should and adhere to the swf’s z-index. read more » [...]

  10. avatar hinh nen says:

    Admirable blog! I’ll almost certainly be referencing some of this facts in my next speech. I would appreciate it should you visited my blog at

  11. avatar David says:

    Weirdly cool. I found this from bing despite it being definitely unrelated to the stuff I’m interested in (tech news), but I read everything. Uh, good stuff!

  12. avatar Tristan says:

    Mere words cannot describe how much I love you for this post. Been having this issue all evening…

  13. avatar stu says:

    AWESOME !!!!!!! LOVE YOU :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>