I Have a fixed position tag that is styled as follows within my CSS:
#facebook {
height: 249px;
width: 50px;
position: fixed;
left: 0px;
top: 200px;
}
There is a flash (.swf) header image on my website, and when the resolution of the browser is low enough, the facebook div is partially hidden by the flash header.
Here is my HTML:
<body id="index">
<div id="facebook"><img src="images/facebook.png" width="50" height="249" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="2,154,40,191" href="http://www.youtube.com/" />
<area shape="rect" coords="3,202,39,240" href="http://www.facebook.com/group.php?gid=72781675198" />
</map>
</div>
<div id="wrapper">
…
<div id="title_box"><object type="application/x-shockwave-flash"
data="images/flash.swf"
width="960" height="450">
<param name="movie" value="images/flash.swf" />
<img src="images/header.jpg" />
</object></div>
How do I get it so my facebook fixed position div is always displayed on top of this .swf content?
Thanks in advance
Jon
If the content is obstructed by flash, even with a correct z-index, add
wmode="transparent"to the flash embed script.