Flash and the z-index problem, solved

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.

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.

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.

Grab the files

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

Useful books

  • Benfutbol10

    Very simple, thanks! :)

  • nice it simply. thanks guys

  • Thankful

    Regardless of any negative comments, I’m a newbie and found this and it saved my bacon. Thank you so much :)

  • victor willemse

    UX tip, change your bg color, I can’t stay long on your page, use it don’t use it.

  • cultureme


    I have a problem with an embedded flash object that I have set wmode to opaque… My modal problem is now solved, but It has generated a new problem within the flash.
    In fact, the flash object is kind of form that have textbox : when I enter some text in the textbox, after validating the form, the text is not saved.
    With wmode=window, i don’t have the problem with textbox, but my modal box is hidden behind the flash…

    Do you have any idea how I can resolve the issue ?

  • Shinkatzu

    Thanks in advance you are the real mvp!