Clinton Montague

Flash and the z-index problem, solved

March 24, 2009

I was always told that Flash would render on top of everything else. That’s it. There’s no way around it. It meant that whenever I had a design using, say, suckerfish menus, I’d have to be careful to ensure that there was enough space below the menu to accommodate for Flash’s nasty little habit. It turns out that the notorious they were wrong. Again. It’s amazing just how many times ‘they’ don’t get it quite right, and that the majority of people still believe them.

Just a quick side note – I’ll be using the excellent sfwobject.js in this tutorial rather than embedding the flash directly in the HTML.

The problem

By default, the Flash plugin will do a weird thing. Instead of being displayed inside the browser, it actually makes a new window on top of the browser which synchronises it’s position with where you’d expect the flash should be. (Well, actually it’s a bit more complicated than that, but I won’t bore you with the nitty-gritty). This means that rather annoyingly, unless you know the fix, flash will always be on top of your other content. Even if you set the z index of the flash to 0 and of your content to a bazillion. Take a look at the example.

This is some flash content - you'll need the flash plugin to see it
HTML on top of the flash. This page was created for the tutorial Flash and the z-index problem. Solved on slightlymore.

The solution

The solution is simple. With an extra parameter, you can force the flash to render in a different window mode. The window mode that’s of interest to solve this problem is transparent opaque (see the comment by philip). It means (again, in simple terms) that the flash is this time rendered not only inside the browser window, but as if it were a normal image in the document flow instead of in a separate window on top of the browser window. With swfobject, it’s almost too easy.

so.addParam("wmode", "opaque");

Or if you want to continue being old-school, you could use the following line:

Adding everything together will leave you something similar to the code below. Again, I have prepared an example page for you to look at.

This is some flash content - you'll need the flash plugin to see it
HTML on top of the flash. This page was created for the tutorial Flash and the z-index problem. Solved on slightlymore.

Grab the files

I have zipped up all the files used in this tutorial for you to download.

Useful books