Menu
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
892
It's the position:fixed that's most important, because it takes the top div from the normal page flow and fixes it at it's pre-determined position. It's also important to use the padding-top:1em because otherwise the term-defs div would start right under the top div.
Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a position other than static set on it, too. position relative and z index set to 999999999999999999999999999999999999999999999999999.
To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
Use CSS style z-index that sets vertical order of your elements. And give it a high enough value so it will always display on top:
#facebook {
height: 249px;
width: 50px;
position: fixed;
left: 0px;
top: 200px;
z-index: 100;
}
Elements are usually rendered (to simplify it and in terms of vertical ordering) according to their natural HTML flow. So later defined elements are rendered over previous ones.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
