[SOLVED] Can't get flash on top of HTML

Can't get flash on top of HTML

I'm using SWFObject to embed a swf and it ends up covering some HTML components on the page. However the HTML is bleeding through on top of the flash movie.

I've played with wmode settings and z-index's, absolute vs relative positioning and nothing seems to work in firefox / safari. Chrome is working exactly as I would expect with wmode=window (the flash is always on top of HTML).

Any ideas how I can tell safari / firefox to keep their HTML behind the flash at all costs?

Solution

Do you have a link as an example for us?

Usually, you'll want a combo of:

wmode:'transparent'

and:

<div class="container">
    <div class="flash">Flash</div>
    <div class="html">HTML</div>
</div>

.flash,
.html {
    position:absolute;
    z-index:2;
    width:200px;
    height:200px;
}
.html {
    z-index:1;
}

Though I'd like to see a link of the HTML escaping over the top of Flash in your situation.

EDIT:

Here's an example I put together, using SWFObject, to position Flash on top of HTML and using the above solution to have everything display as you'd expect: http://codefinger.co.nz/public/flash_atop_html/

Tested in Firefox, Safari, Chrome, IE.