We have faced this problem many of the times. When we want to display some message on top of all layers on a page or use some feature like jQuery light boxes. Normally the flash file continues to shine through the page. No matter what you do with layering the dom elements using z-index.

See the layering flash content problem definition here.

Before this, people used to dodge this issue with some fixes like hiding the flash area completely and then showing a static image of the html file in its place. Then it gave a semblance of layering flash beneath html content. But since flash 9 we can layer flash elements under html with ease.

See the solved situation where we have content over flash.

What you need to do to achieve this?

Nothing much. You set z-index value to your divs. Say we have a flash div (#flasho), a div for creating a the transparent layer (#transo), and the div for displaying content as a light box (#boxo)

Here is the css for them all. There is also the javascript code for the effect call on button click. (see solved example link above.

<style type="text/css">
#boxo{top:200px;left:400px;border:1px double #600;width:532px;height:210px;margin:0px;z-index:100;position:absolute;display:none;background:#FFFFFF;}
#transo{background:#000000;height:400px;;width:100%;-moz-opacity:.80;top:0px;left:0px; filter:alpha(opacity=80); opacity:.80;display:none;position:absolute;z-index:99;}
<script type="text/javascript">
function addthiseffect()

Now for the flash part we need to do this little addition. Add wmode=”transparent” to the <embed> tag and <param value=”transparent” /> to the <object> tag. See my Flash code below that I have used in my example.

<div style="float:left;width:343px;height:160px;margin-top:7px;z-index:0;">



WIDTH="343" HEIGHT="160"><PARAM VALUE="flash/course-in-aviation.swf"><PARAM VALUE=high><PARAM VALUE=#00000><param value="transparent" /><EMBED src="flash/course-in-aviation.swf" quality=high bgcolor=#FFFFFF WIDTH="343" HEIGHT="160" wmode="transparent"

NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"



More posts you might be interested in:

BING being SLOW thing
Disable Javascript on IE8 /IE7 (Internet Explorer) : Common Mistakes
Check if htaccess is enabled | Test if htaccess is working

7 Responses so far.

  1. Devin Walker says:

    Thanks for the code, I’ve been stuck on getting my jQuery drop-down to display over my Flash site for awhile.

  2. achar says:

    Nice article…i have the same issue….where my flash part is declared within script .its not mentioned in html tag…so am not able to add wmode=”transparent” in to my embed tag…waiting for your reply

  3. SJ says:


    You should be able to embed it as a param. ()

  4. SJ says:


    param name=”wmode” value=”transparent”


  5. pariwebs says:

    hi i have same flash problem in html. i use your answer its really helpful to me thank you..

  6. Andrea says:

    Thank u! you’ve just solved a big problem for me.


  7. Billy says:

    Rajesh duuuuuuuuude. Thanks a million. The good that you did me, hope comes back x10

    be well!

Leave a Reply