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 Tim asdasd at Wed Aug 04 2010 13:58:29 GMT-0400 (Eastern Daylight Time)

Nevermind, I just made an empty div and set the image as its background

-----------

From Tim asdasd at Tue Aug 03 2010 22:34:35 GMT-0400 (Eastern Daylight Time)

I also need to retain the transparency of the object.

-----------

From Tim asdasd at Tue Aug 03 2010 22:25:53 GMT-0400 (Eastern Daylight Time)

Hi, this article is pretty old by now and I don't know if you will see this comment, but I am having a similar problem with my flash object. In this case, z-index isn't working to make it appear over top an image element I have. I used this js to place the object inside a div container:

        var flashvars = {};
        flashvars.xml = "config.xml";
        flashvars.font = "font.swf";
        var attributes = {};
        attributes.wmode = "transparent";
        attributes.id = "slider";
        swfobject.embedSWF("cu3er.swf", "cu3er-container", "600", "300", "9", "expressInstall.swf", flashvars, attributes);

As you can see, the transparent mode is enabled, but I want it to cover up the image, not lay below it. The z-index of 200 is greater than any other elements I'm using. You can see the site live here: http://spotlight.isgreat.org/index.html

-----------

From bhargav Rapelli at Mon Aug 02 2010 15:17:44 GMT 0530 (India Standard Time)

Thank you very very much. I have been working on the z-index issue of the <object> tag from 2 days. Your post solved my problem with in a min.

-----------

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