CODEWITHSUNDEEP
csshtml
Jon Kyte
Jon Kyte

Reputation: 2020

Fixed position Div ALWAYS appear on top?

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

Upvotes: 14

Views: 72790

Answers (5)

Robert Norrman
Robert Norrman

Reputation: 11

Just to clarify: Just setting the z-index on a fixed element won't do the trick. Setting the absolute position won't give you the effect your after. Perhaps setting a parent to fixed position and the child to absolute position and the appropriate z-index?

An example: 

.fixed { position: fixed; z-index: 4000000; width: 200px; right: 0; top: 0; cursor: pointer; }
.fixed .show-menu { display:block; background-color: #ffffff; width:100%; padding: 10px; font-size: 18px; right: 0; position: absolute; z-index: 60000000; }

Upvotes: 0

Chirag Khatsuriya
Chirag Khatsuriya

Reputation: 635

You can use CSS style z-Index to show your menu on top.

#menu
{
z-index: 100;
}

Upvotes: 2

Robert Koritnik
Robert Koritnik

Reputation: 105029

z-index

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.

Upvotes: 11

Cristian Necula
Cristian Necula

Reputation: 1245

If the content is obstructed by flash, even with a correct z-index, add wmode="transparent" to the flash embed script.

Upvotes: 6

xkeshav
xkeshav

Reputation: 54022

try with position: absolute;

Upvotes: 0

Related Questions