16 May 2007

Flash Objects and the Z-Index

... On my Mac using Safari the drop down menus appear. When I move my cursor down on the drop down the rest of that drop down disappears In IE the drop down menus go only as far as the the top of the Flash file. I am not sure if it does the same in Mozilla. Anyway to circument this? Perhaps I could just do a pop-up page? - Michael

Yes! This is easy. First, you'll need to add a param tag to your object tag. Set the name to wmode and the value to transparent.

<param name="wmode" value="transparent" />

Then, force your Flash object to be below everything else by changing its z-index to 0. For the unfamiliar, think back to Geometry class in high school. You had X, Y, and Z axis. In the user interface world, the Z axis values specify how objects are stacked, and typically don't deal with perspective as you would see in a 3D game.

For some reason, applying z-index directly to a Flash object doesn't work properly. Wrap your Flash object in a div, and apply the z-index to it.

<div style="z-index: 0">...</div>

That's all there is too it!

Update 1: Unfortunately, the above code only works for Internet Explorer! The object tag is for IE only. Most embeded Flash content is wrapped with two tags in order to support both IE and other browsers. These tags are the object and embed tags. In order for this fix to apply to all browsers, modify the embed tag as well, adding the wmode property with a value of transparent.


Dave said...

Thank you for posting and answering this question. It was exactly what I needed for the www.alphasoftware.com site. The menu on top kept popping up under the flash in the central image... I knew it had something to do with Z-order - thanks for giving the solution!

Dave McCormick
Alpha Software

Rianne said...

Many thanks for this information. It was the perfect solution for a dropdown menu that was hiding behind a flash banner in a site I have been working on.
When looking at all these blogs and forums, providing all kinds of solutions, it really does make me angry and sad that IE is the real problem here. Why?

Cheap SSL Certificate said...

Perfect just what I was looking for! .