Div Over Flash

Let's say you want to display a <div> element over a swf and take over the events like onmousedown and such ( think popups ). How do you proceed ? Well, normally you would remember the z-index css attribute and assign a lower z-index to the swf.

<div style="z-index: 1;">
<object style="z-index: -1;" ...>
</object>
</div>
While this sounds pretty decent, the main problem with it is that it doesn't work. The browser simply ignores any rendering order you have assigned to elements. What to do, what to do ?

We need to set the wmode object parameter to 'transparent' :

<div style="z-index: 1;">
<object style="z-index: -1;" ...>
<param name="wmode" value="transparent" />
<embed wmode="transparent" ... />
</object>
</div>
This will force the browser take in account the rendering order and pass events in the same order.