Flash Objects Displaying on Top of HTML Content
I have experienced a problem recently when designing a website; the flash banner was displaying on top of the CSS menu regardless of the stacking order (”z-index”).
By default, browsers place embedded content, on the top layer. In older browsers, you can’t place a DHTML layer on top of a Flash layer. Newer browsers have the ability to layer Flash content with DHTML content and in some cases the ability to use transparent backgrounds in the Flash.
The parameter WMODE
The solution for this problem is using the parameter WMODE to allow layering of Flash content with DHTML layers. The parameter WMODE has 3 possible settings: ‘window’ (default), ‘transparent’, or ‘opaque’. Setting WMODE to ‘transparent’ or ‘opaque’ will prevent the Flash object from playing in the top layer and allow you to adjust the stacking order of the movie within other layers of the HTML document.
Just add this parameter:
<param name="wmode" value="transparent" />
And this value to the embed attribute:
wmode="transparent"
This should resolve the problem. 
Popularity: 16%
What I´m listening to: Leonard Cohen - I'm Your Man
This Post Was Brought To You By:
July 14th, 2007 at 11:36 pm
So that’s how it’s done. I had the same problem when I designed a website sometime ago with flash content. I decided to scrap the idea after I couldn’t figure out how to make it work properly.
July 15th, 2007 at 12:36 am
So that's how it's done. I had the same problem when I designed a website sometime ago with flash content. I decided to scrap the idea after I couldn't figure out how to make it work properly.
July 15th, 2007 at 12:04 pm
So here you go, you’ve got a solution for it now.
July 15th, 2007 at 1:04 pm
So here you go, you've got a solution for it now.
July 16th, 2007 at 5:45 pm
Just happened to Stumble upon this. Thanks a lot! Now I can move on with my site design.
July 16th, 2007 at 5:47 pm
You’re welcome Corrado.
July 16th, 2007 at 6:45 pm
Just happened to Stumble upon this. Thanks a lot! Now I can move on with my site design.
July 16th, 2007 at 6:47 pm
You're welcome Corrado.
July 24th, 2007 at 11:03 am
Any idea how to get it viceversa? I have a site wherein the flash menu is overlapped by an html jump menu. When the flash menu expands, the menu goes behind the HTML jump menu. Wondering how to get this resolved. Thanks for the help in advance.
regards
Ray K
July 24th, 2007 at 12:03 pm
Any idea how to get it viceversa? I have a site wherein the flash menu is overlapped by an html jump menu. When the flash menu expands, the menu goes behind the HTML jump menu. Wondering how to get this resolved. Thanks for the help in advance.
regards
Ray K
July 24th, 2007 at 2:35 pm
Yes I can have a look for you. Can I have the URL please?
July 24th, 2007 at 3:35 pm
Yes I can have a look for you. Can I have the URL please?
July 29th, 2007 at 3:10 am
This doesn’t work on LINUX, you have to position in iframe between the two layers if you want it to work there, and even then it only fixes some of the LINUX browsers.
July 29th, 2007 at 3:14 am
Sorry, meant to say ‘position an iframe’, not ‘position in iframe’. Oh, forgot to mention, iframe has to start as display: none and then have script change it to display: block.
http://blog.marcoos.com/2006/07/21/html-div-above-a-flash-animation-on-linux-its-possible/
July 29th, 2007 at 4:10 am
This doesn't work on LINUX, you have to position in iframe between the two layers if you want it to work there, and even then it only fixes some of the LINUX browsers.
July 29th, 2007 at 4:14 am
Sorry, meant to say 'position an iframe', not 'position in iframe'. Oh, forgot to mention, iframe has to start as display: none and then have script change it to display: block.
http://blog.marcoos.com/2006/07/21/html-div-abo…
August 1st, 2007 at 1:13 am
I see Mason, yes it might work differently on a Linux Machine. It might work for Gecko browsers only.
August 1st, 2007 at 2:13 am
I see Mason, yes it might work differently on a Linux Machine. It might work for Gecko browsers only.
September 19th, 2007 at 7:33 pm
oh we didn’t care,we made it very clea. Hale Mauricio.
September 19th, 2007 at 8:33 pm
oh we didn't care,we made it very clea. Hale Mauricio.
August 12th, 2008 at 5:15 am
HI,
fluit design with flash and layers, but I still not be able to make the wmode with the css div layers.
If anyone can guide me to fix this problem will be great. The URL is up at http:geospatialdynamics.com
Marius
November 12th, 2008 at 5:58 pm
This does not work anymore.
March 1st, 2009 at 9:34 am
Hi dear!
I'm very very surprised! I created an AJAX box menu and my flash was over it. Your details solved my problem.
Thank you!
March 5th, 2009 at 10:36 am
Hi, I really like your site, nice posts! I would like to give you a free flash banner for you to advertise in other blogs/sites if you need one of course. Anyways great blog! Thanks
June 11th, 2009 at 11:32 am
Great post.. your solution works.. I apply it on my websites..
I was searching for long time to find solution fot this flash position issues,
And end here..
Thank you..!!
——————-
Hery
July 2nd, 2009 at 11:20 am
hi this is a nice post but all about of this topic I do not properly understand. so please descried it.