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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Flash and the z-index problem. Solved</title> <script type="text/javascript" src="./swfobject.js"></script> <style type="text/css"> #test { position: absolute; top: 300px; left: 300px; width: 400px; background-color: #ccc; padding: 10px; color: #333; font-family: georgia; font-size: 2em; } </style> </head> <body bgcolor="#ffffff"> <div id="flash">This is some flash content - you'll need the flash plugin to see it</div> <div id="test">HTML on top of the flash. This page was created for the tutorial <a href="http://slightlymore.co.uk/wisdom/flash-and-the-z-index-problem-solved">Flash and the z-index problem. Solved</a> on <a href="http://slightlymore.co.uk">slightlymore</a>.</div> <script type="text/javascript"> var so = new SWFObject("wmode.swf", "wmode.swf", "550", "400", "8","#ffffff"); so.write("flash"); </script> </body> </html> |
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.
1 | so.addParam("wmode", "opaque"); |
Or if you want to continue being old-school, you could use the following line:
1 | <param name="wmode" value="opaque" /> |
Adding everything together will leave you something similar to the code below. Again, I have prepared an example page for you to look at.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Flash and the z-index problem. Solved</title> <script type="text/javascript" src="./swfobject.js"></script> <style type="text/css"> #test { position: absolute; top: 300px; left: 300px; width: 400px; background-color: #ccc; padding: 10px; color: #333; font-family: georgia; font-size: 2em; } </style> </head> <body bgcolor="#ffffff"> <div id="flash">This is some flash content - you'll need the flash plugin to see it</div> <div id="test">HTML on top of the flash. This page was created for the tutorial <a href="http://slightlymore.co.uk/wisdom/flash-and-the-z-index-problem-solved">Flash and the z-index problem. Solved</a> on <a href="http://slightlymore.co.uk">slightlymore</a>.</div> <script type="text/javascript"> var so = new SWFObject("wmode.swf", "wmode.swf", "550", "400", "8","#ffffff"); // this next line is the important one so.addParam("wmode", "opaque"); so.write("flash"); </script> </body> </html> |
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?
Tags: Flash, HTML / XHTML, javascript, swfobject
19 Comments
I’m having trouble with a CSS drop down menu that lays on top of the lfash movie beneath it. The opacity has been set to transparent (also tested opaque). In fact, using Dreamweaver CS4, inserting an SWF into your document turns this on by default and copies swfobject.js into a Scripts folder for you. My issue is on macs using Safari v.3 and v.4, The drop down menu does a strange “peek-a-boo”, showing and hiding different menu items as you move the mouse around.
http://www.geigercustomers.com/pm/projects/pbgroup/wood-window-fixed.html
If you have a suggestion to try, I’d really appreciate the gesture.
You’re simply re-hashing what has already been blogged about several times over.
Hi Clinton
Good article, but I’d like to point out a few things:
1. wmode transparent is actually bad in most cases, as it taxes the CPU much more than other wmodes, and it is also known to cause all sorts of bugs in Flash Player. wmode opaque will work for z-index purposes, so I suggest avoiding wmode transparent unless you truly need it.
2. You don’t need to use position:absolute, you can simply specify z-index: (number) on each element you’re stacking. For instance the SWF can get z-index: 1 while the suckerfish menu gets z-index: 2.
3. Thanks for promoting SWFObject, but might I suggest using the newer version of SWFObject? It’s up to v 2.1 now. ;)
You can see examples of Flash and the z-index (using SWFObject 2) on my site: http://pipwerks.com/lab/swfobject/z-index/2.0/
Cheers
@glenn – I would love to help, but I don’t have access to a mac to test on at the moment. Does anyone else have any suggestions / solutions?
@James Johnson You’re right, but another article in a google search can’t do any harm, can it?
@philip Thanks for the feedback! I have updated the post to use opaque instead of transparent :) and will be sure to use the new swfobject in future projects and posts.
Nice write-up, even if it has been discussed a time or two before. Have seen the swfobject.js but never used it, will need to give it a shot. Benefits of it?
@glenn: I have Safari 3.1.2 and am not seeing anything funky with your menu. Double-checked it in FF as well.
Thank you so much for posting your solution. I almost fell out of my chair when this finally worked on IE. Thank you so very much!
-Mike
Hello,
Well, this has been posted on many websites for years. You can do a search for z-index and wmode, you’ll get lots of results. Of course it’s always useful for some readers who may not know of this classic solution yet. ;)
One problem with your article, though, is that the problem is more complex since the exact behavior of Flash elements in a browser depend on three parameters:
1. Version of the Flash Player.
2. Operating system (and version of the operating system or of its core display components).
3. Web browser (and version of the browser).
For instance, on Linux with Flash Player 9 your solution won’t work. Flash elements are always on top, period. (Well, you can use an empty iframe above the Flash element, but that fix is quite hard to implement.) That’s a limit in the Xorg display server and in Flash Player 9, which was fixed for Flash Player 10.
Other example: your test pages (broken and fixed) display the same behaviour on Mac OS X Leopard, with Flash Player 10, Firefox 3 and Safari 4b. It’s broken in Opera 9.6, but maybe not in the way you’d expect.
Oh, and philip may be right about using opaque when you don’t specifically need transparent (I can see it being more ressource-hungry); but he’s just completely wrong about z-index. In philip’s examples, you can reverse the z-index (giving a z-index of 1 to the navigation, and of 100 to the Flash animation for instance), and it won’t change, the navigation will still display on top of the Flash animation.
Here’s a quick reminder of how z-index works:
- only positionned elements can have a z-index value;
- if the z-index property is set for an element, but that element is not positionned (with a position that is not the “static” default value), the z-index property will be ignored;
- philip’s examples work because a positionned element (the UL submenus, which have no explicit z-index) will be displayed on top of other contents by default, if no other stacking context is defined.
Of course, a quick reminder would be nothing without a quick RTFM ;), so here goes:
http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
Some of you guys could really benefit from being such smug gits about all of this. “Classic solution” “re-hasing” – you know, if something’s new to the person who thinks it, then it’s new. Tecchie “my cock’s bigger than yours”. Productive.
@florent: thanks for the explanation. you may very well be right about the z-index, I’ll have to dig into it.
@edoxeth: i completely agree. we’re all trying to help (or be helped), and i wish people who feel posts like this are beneath them would do us all a favor and not post a reply. or, if they feel they have something to add to the conversation, do it without sounding like a pompous ass.
cheers
@Edooxeth: I care to disagree. Reactions such as “well, that’s nothing new” are mostly reactions to the tone of an article that presents as solution as something new (— You know that annoying problem we’ve had for years? it’s just been solved. — But that one was solved years ago, right?). You can prevent this by 1) doing research if you’re not sure whether some information is newish or not, and 2) make sure you convey the adequate tone.
Did that sound patronizing? Most probably. But I stand by it. I’ll admit I’m a bit of an elitist, and I care for precise information. It’s okay to rehash existing information, as long as you don’t substract important information and don’t add important mistakes. Even better, if you can add your own research, you’re adding to the current knowledge.
I just want to thank you for posting this solution, re-hashed or not, I was unable to find the solution anywhere else during my googling. I am still learning. It was very helpful for me and I don’t think the internet can have too much info. So let’s all just all play nice.
I have to agree with Edooxeth taking Florent V. and James Johnson to task on their attitudes.
Like Florent, I’m an unapologetic elitist myself, but one thing I never do is try to make people feel stupid (implicitly or otherwise) because they ask questions to answers that are already “documented.” By that rationale, why even go to college to take a humanities or physics course ? The answers are already there, so why bother to pose a question to a teacher? That kind of attitude is more than elitist. It’s mean spirited. Regardless of how well documented the z-index Flash issue was, (and apparently the solution is not quite so ubiquitous as Florence cooly suggests) that kind of cliched, geek elitism makes people become afraid to ask any question about anything. If I want to ask a question about collapsing margins in HTML, should I be obliged to study the matter for eight hours first, for fear of trying the patience of some technorati ?
Hello there! this is a great solution, I am using it already. There is just one issue that I can’t sort out yet and I wonder if someone know about and could possibly help me…
The html on the div displayed on the top of flash is not showing the cursor pointer (little hands) that would normally appear on links (tags). This is happening on safari.
Thanks!!
@Marcela Thanks for the kind comments! But looks like you put some HTML in the comment there – sorry, turned it off to prevent clever geeky attacks :) – can you post just the URL without the HTML markup?
Hello everyone, because of the various opinions voiced in the comments, I have decided to set up new section the site – Frequently googled questions which I hope will answer some of the more trivial questions. Trivial if you know what you’re searching for, that is. As I think that comments so far have shown – it’s trivial if you know the answer, but impossible to find if you don’t know how to search for it.
Can anyone help me with this one. .. . I have placed a Popup window (swf) – wmode ‘transparent’ in a layer above the main html content of my page. Once the popup is closed. . .. the html links don’t work. . . . of course the swf is still there just nothing visible. Here is the link: http://tinyurl.com/cs6gtg
Thanks in advance
This solution fails in Firefox 3, PC…. good post though, simple enough for me, good code layout > elitest’s take note – there are increasing number of humans who are programming these days, not just code monkeys ;-)
Great explanation and simple solution. It worked across all major browsers i checked. Thanks
Thanks! That was very useful!