Anyone dealing with HTML will or already has encountered an interesting behavior of embedded objects and absolute positioned objects. When embedded object (e.g. flash animation) is positioned over part or entire absolute positioned object, absolute position object is always displayed behind embedded one.

What to do?

A first thing that I always thought of was z-indexes. Only one problem there. Z-index doesn’t work in Internet Explorer in this case. But how can it be solved?

There is an attribute you can set for embedded objects called wmode. If this attribute contains value of transparent, you will force embedded object to display behind the absolute positioned one.

Example:

<embed width="465" height="285" 
type="application/x-shockwave-flash" src="myflashanimation.swf" 
style="" name="movie_player" quality="high" 
allowfullscreen="true" allowscriptaccess="always" flashvars="" 
wmode="transparent"
id="movie_player"/>