T.I.D.U. - The z-index of Flash
The T.I.D.U. category stands for: Things I don't understand. A couple of weeks ago, I tried the Making the absolute relative approach with a Flash file. In other words, I set up a headmast as a containing block for a flash movie and a navigation menu made out of an unordered list. The Flash file was meant to be in the background with the navigation lying on top of it.
You get the idea? Yes. When I tried this with an image it worked quite well. So far so good, that's not really a surprise.
Unfortunately, I wasn't able to make it work with a .swf file. I'll give you an example so you can see what I am talking about:
The setup using an image and a HTML navigation
The flash object is always placed on top regardless of source code order or z-index. Why is this so? Anybody having an explanation for this? Probably it has something to do with the plugin needed for playing flash movies. Since it is an external application and not part of the browser it is impossible to make such elements part of a stack? Is this correct behaviour? I'll give you an example here as well:
The same setup using a flash and a HTML navigation
and to prove that the navigation is still there, let's shrink the flash movie a bit:
Same as above but with reduced flash dimensions
Posted by Minz Meyer at November 30, 2004, 05:42 PM | To Top
Other ingredients
Try adding:
<param name="wmode" value="transparent">
More info at:
http://www.macromedia.com/support/flash/ts/documents/wmode.htm
Posted by: Aleksandar at December 1, 2004 03:37 PM | Let Cool (this ingredient)
Perhaps this is just a fluke in Firefox, but I got the menu working on top of the flash by adding #navlist: left: 40px; bottom: 30px; z-index: 99; this example: http://researchkitchen.de/blog/article/woes-of-flash-withflash-shrinked.html
try it. Haven't tested it in other browsers but I don't see why it wouldn't.
Posted by: Jim Amos at December 20, 2004 09:13 PM | Let Cool (this ingredient)
Doh. Scratch that. I see now, how the scrolling text covers up the nav as it passes. How annoying.
Posted by: Jim Amos at December 20, 2004 09:20 PM | Let Cool (this ingredient)
Check these out:
http://joshuaink.com/blog/82/flash-content-and-z-index
http://www.sitepoint.com/forums/printthread.php?t=158317
Hope it helps, if you haven`t found the solution already..
Posted by: emiliano at January 6, 2005 02:58 AM | Let Cool (this ingredient)
Thanks to all of you for your suggestions. I was quite aware of the wmode attribute, but making the flash file transparent wasn't an option due to a textured background.
So in the end it all comes down to Patrick's explanation, it just isn't possible to control the display layer of the embedded flash file. Too bad.
Posted by: Minz Meyer at January 14, 2005 04:09 PM | Let Cool (this ingredient)
Patricks explanation is only partially correct. the only browser I am having trouble with that I know is Opera.
check out this link and you see what i mean
http:www.angermgmtmusic.com/template6/comp.htm
I used javascript and css for the stacking order to write different things and it works as long as you set a z-index to a div tag and then add in the flash to the div tag. worked for me.
Eric
Posted by: Eric at March 10, 2005 06:43 PM | Let Cool (this ingredient)
[..]The flash object is always placed on top regardless of source code
order or z-index. Why is this so? Anybody having an explanation for
this? Probably it has something to do with the plugin needed for playing
flash movies. [..]
exactly. the plugin effectively writes its graphic output as an overlay
to the browser...effectively taking over that particular portion of the
screen output direclty (that's why if you scroll really quickly,
sometimes you see ghosted regions of plugin display - happens with
quicktime and co as well - before the display system has a chance to
update the current view)
[..] Since it is an external application and not part of the browser it is
impossible to make such elements part of a stack? [..]
not that i know of, unfortunately.
[..] Is this correct behaviour? [..]
yes.
Posted by: patrick h. lauke at November 30, 2004 07:35 PM | Let Cool (this ingredient)