How to enable HTML content on top of Flash content

Question

I'm developing a Flash application which is communicating with Javascript to allow more features such as custom HTML input etc., by placing an absolute positioned div on top of the Flash application and controlling its position etc. with Flash & Javascript.

Because these html elements have to appear above the Flash content, I figured the following basic CSS would be enough to do the trick:

#flashContent {
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 0;
            }
            #htmlContent {
                position: absolute;
                left: 200px;
                top: 200px;
                z-index: 1;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }

So, the htmlContent has a higher z-index than the flash content and thus it should be shown above it. Unfortunately, this only seems to work when you set the Flash object's "wmode" parameter to "transparent".

The problem with this setting is that it's seriously decreasing the application's frame rate to an unacceptable amount.

For static content this does not seem to be a problem, however for my application there's all kinds of elements that you can drag around which have to be moved real-time (while moving the mouse).

So, how do I enable html content on top of flash content without using the "transparent" wmode parameter or how do I optimize frame rate when using the "transparent" wmode parameter?

Answer 1

You can use wmode = 'opaque', and still use z-index'ing. Transparent can be very buggy.

Answer 2

don't use absolute positioning. float it.

Answer 3

if you are using javascript already to show the new layer on top you could just hide the flash while the div is enabled and show it again when you're done.