slightlymore

the online residence of Clinton the intertube sorcerer

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.

Application

I first saw this being implemented on www.mitchelsliwa.com and assumed that the man must have been dabbling with black magic. I’m currently working on a huge project which uses this code so that we can get a lightbox over a flash site. Where else have you seen this being used?

  • Thankful

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