Flash Object And Z-Index: How To Make Them Play Nicely Together

FruitNotes beta

Your All-in-One Online Notebook

Flash Object And Z-Index: How To Make Them Play Nicely Together

Last updated at (Thu Jan 10 2008 11:47:17)

Posted by: Nitin Gupta

Bookmark on FruitNotes

Article explains how to make flash and pop-div work properly, resolving z-index issue

http://manisheriar.com/blog/flash_objects_and_z_index

Flash Object And Z-Index: How To Make Them Play Nicely Together

I’m currently working on a site with the wonderful Hong Vo from Namaste Interactive that has an embedded flash video object on the home page. This site also has a horizontal drop-down menu. All was great until one of the drop down lists became long enough to overlap the flash video. Apparently, when embedding a flash video into an html page the embed code automatically puts the flash video on top of everything else. I could not for the life of me get the menu to lay behind the video no matter what I tried.

It was one of those “little problems” that was eating away my entire morning and most of my patience! ;o) In sadness, I discovered several forum discussions in which, apparently, it was agreed that there was simply nothing to be done.

Thankfully, I was stubborn and continued to dig further (I don’t give up easily!) and found this discussion, which contained a simple solution, which I will summarize for you:

Wrap your flash content in a div
Add <param name=”wmode” value=”transparent”> to your object tag
Set wmode=”transparent” in the embed tag
Use css to set the position and z-index for your div (don’t set negative z-index values as it will make your flash disappear)

The CSS

#flash {
position: relative; /*or absolute*/
z-index: 0;
}

The XHTML

And that’s it!

This entry was posted on Friday, April 7th, 2006 at 2:59 pm and is filed under Tips and Tricks, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Rate this blog

Report Abuse

Comments

From Jeremy Carlson at Fri Aug 14 2009 16:54:39 GMT-0600 (MDT)

Thanks so much - I was having this very problem in IE6 and this fixed it.

While trying to clean up my code I tried applying the position: relative and z-index directly to the object in CSS, like this:

object { position: relative; z-index: 0 }

And it seems to work! I haven't tested this thoroughly yet, but hope this helps someone out, too.

-Jeremy

-----------

From Jeremy Carlson at Fri Aug 14 2009 16:54:22 GMT-0600 (MDT)

Thanks so much - I was having this very problem in IE6 and this fixed it.

While trying to clean up my code I tried applying the position: relative and z-index directly to the object in CSS, like this:

object { position: relative; z-index: 0 }

And it seems to work! I haven't tested this thoroughly yet, but hope this helps someone out, too.

-Jeremy

-----------

From Jen Rasmussen at Wed May 20 2009 09:30:09 GMT-0500 (Central Daylight Time)

Hi i am running across this same issue but can't seem to get the fix to work.

Here's my relevant code:

CSS:

div.flash {
position:relative;
z-index:0;
}

div.menu {
width:800px;
position:relative;
z-index:1;
}

Thanks much!

-----------

From Ryan May at Thu Mar 12 2009 12:04:14 GMT-0700 (Pacific Daylight Time)

Gupta.. You are the man..

This saved probably 2 days of frustration. Thanks for publishing it in a clean and easy to understand manner.

Lifeyo.com

-----------

Leave your comment(s) below:

To start Your own Blog

Click Here