tags:

views:

2381

answers:

4

A site I'm working on has Flash headers (using swfobject to embed them). Now I'm required to code in a bit of HTML that's supposed to overlap the Flash movie.

I've tried setting z-index on the Flash element's container and the (absolutely positioned) div but it keeps "vanishing" behind the Flash movie.

I'm hoping for a CSS solution, but if there's a bit of JS magic that will do the trick, I'm up for it.

Update: Thanks, setting wmode to "transparent" mostly fixed it. Only Safari/Mac still hid the div behind the flash on first show. When I'd switch to another app and back it would be in front. I was able to fix this by setting the div's initial styles to display: none; and make it visible via JS half a second after the page has loaded.

+7  A: 

Make sure the FlashVar "wmode" is set to "transparent" or "opaque," but NOT the default, "windowed"... then you should be able to use CSS z-index

Steve Paulo
wmode is like a golden idol buried in the deepest jungles of south america. I remember I was ecstatic the first time I heard about it.
matt lohkamp
Just keep in mind that it doesn't work with Linux browsers except with the beta of Flash 10 and very recent browsers (Fx 3.0.0+, Opera 9.50+, don't know about others)
Michael Johnson
How many Linux users DON'T keep their browsers and associated programs up-to-date? That's a savvy-by-definition demographic.
Steve Paulo
A certain quite large subset of linux users also run flash/swf killing browser plugins on principle, so I try not to worry too much about them when developing. </semisnark>
defmeta
+2  A: 

Follow-up note: As you found in your update, getting HTML to display on top of Flash is currently a finicky proposition, and even with the JS magic you found you should expect that the Flash will block out your HTML for some viewers using off-browsers, older versions, and so on.

If reaching an arbitrarily large browsing audience is important to you (mobile devices, for example), then redesigning your content to avoid the overlap may save you headaches in the long run.

fenomas
You're right of course. In this case the client doesn't care but it's sound advice in general.
_Lasar
The other question in this case, however, is how many mobile devices support Flash? The iPhone, I'm sure, maybe some of the Windows Mobile smartphones, but after that? (also, I'm not well-versed in mobile web dev, so I really don't know...)
Steve Paulo
Steve: strike that, reverse it! Most modern smartphones support Flash, except the iPhone, which does not. Specifically, most modern phones (i.e. those with web browsers) have Flash Lite, usually version 2.x or 3.x. Flash Lite 2.x is roughly similar to Flash 6, and Lite 3.x is similar to Flash 8.
fenomas
A: 

Set this flash variable like this

s1.addParam("wmode","transparent");

then in the div tag use this style

style="z-index:inherit; 

The problem will be solved.

A: 

Like Steve Paulo said, then comes the fun part when the HTML that's sitting on top of your flash is calling more flash...

Oh the fun we had with that one, which involved setting the z-index to be actually be lower to account for flash thinking it's the bees knees and therefore must always be on top.

Steve Perks