固定位置Div ALWAYS出现在顶部?

Jon*_*yte 10 html css

我有一个固定的位置标记,在我的CSS中样式如下:

#facebook {
height: 249px;
width: 50px;
position: fixed;
left: 0px;
top: 200px;
}
Run Code Online (Sandbox Code Playgroud)

我的网站上有一个flash(.swf)标题图像,当浏览器的分辨率足够低时,facebook div被闪存标题部分隐藏.

这是我的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>
Run Code Online (Sandbox Code Playgroud)

我怎么得到它所以我的Facebook固定位置div总是显示在这个.swf内容之上?

提前致谢

乔恩

Rob*_*nik 8

z-index的

使用CSS样式z-index设置元素的垂直顺序.并给它一个足够高的值,所以它总是显示在顶部:

#facebook {
    height: 249px;
    width: 50px;
    position: fixed;
    left: 0px;
    top: 200px;
    z-index: 100;
}
Run Code Online (Sandbox Code Playgroud)

元素通常根据其自然HTML流程进行渲染(以简化它和在垂直排序方面).因此,后来定义的元素将在之前的元素上呈现


Cri*_*ula 5

如果内容受到闪存的阻碍,即使使用正确的z-index,也可以添加wmode="transparent"到flash嵌入脚本中.