Flash and z-index issue

Adobe FlashI came across a scenario where I needed to add html content in a place that was currently taken up by Flash content. Now, I could’ve broken up the Flash content into multiple swfs, and placed them accordingly on my page so the Flash content and html content can harmoniously co-exist beside each other, but I found a simpler, alternative solution that produces way less code and doesn’t involve breaking up my Flash.

I first attempted to place my html div content on top of the Flash using position: absolute; in my CSS (and of course, position: relative; on the parent div). This worked flawlessly in FF3, FF4, Chrome 11, Opera 11, and IE9 but the Flash content appeared above my html content in Safari 5 and (of course) IE7 and IE8.

To solve this issue I attempted to layer my content using z-index in my CSS, hoping to force the html content to display on top of the Flash, but that didn’t work. It didn’t matter if the Flash was set to a z-index of 0 and the html content was set to 1000, the Flash didn’t want to budge. At this point it seemed a shame to have to do all this the long convoluted way just to support those 3 odd behaving browsers.

Upon a little research, almost everyone who has ran into this particular issue has claimed that Flash will always take priority over any content on your page, but upon stumbling on a page from slightlymore, it appears there is a solution.

Turns out that altering the window mode in your Flash with a paramater of ‘opaque’ allowed the html to sit on top of the Flash quite nicely. Simple.

So what was:
'wmode', 'window',
was changed to:
'wmode', 'opaque',

Doing this made the z-index values in my CSS completely irrelavant, so I removed them. Now all had to do was re-design my current swf so content didn’t reside underneath the html and I was done.

Thanks to Clinton from slightlymore for pointing this out.