CSS overlay problems, showing a splash page over flash element

Check out the link below, as you can see my overlay is hidden behind the flash element. However, the blue bar with the 'Continue' button appears above开发者_如何学编程 everything. Does anyone know what CSS changes I need to make so the overlay will appear above everything below it? The background loads an iframe. Thanks.

http://honr.it/s4j

I can't add wmode="transparent" to the embed tag, since I have no control over the page loaded in the iframe.

AFAIK you need to set the wmode of the Flash player to "transparent" in order for this to work. Along with that you need something like as your CSS:

#popup {
    position: relative;
    z-index: 1;
}

#flash-player {
    position: absolute;
    z-index: 0;
}

Basically, the z-index property needs to have value lower than the popup.