Question

我有一个固定的位置标记，在我的CSS中按如下方式设置：

#facebook {
height: 249px;
width: 50px;
position: fixed;
left: 0px;
top: 200px;
}

我的网站上有一个flash（.swf）标题图片，当浏览器的分辨率足够低时，facebook div会被flash标题部分隐藏。

这是我的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>

如何获取，以便我的Facebook固定位置div始终显示在此.swf内容之上？

提前致谢

乔恩

Answer 1

z索引

使用CSS样式z-index设置元素的垂直顺序。并给它一个足够高的值，所以它总是显示在最上面：

#facebook {
    height: 249px;
    width: 50px;
    position: fixed;
    left: 0px;
    top: 200px;
    z-index: 100;
}

元素通常根据其自然HTML流程进行渲染（以简化它和垂直排序）。因此，后来定义的元素将在之前的元素上呈现

Answer 2

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

Answer 3

您可以使用CSS样式z-Index在顶部显示您的菜单。

#menu
{
z-index: 100;
}

Answer 4

尝试使用position: absolute;

Answer 5

只是为了澄清：只是在固定元素上设置z-index将无法解决问题。设置绝对位置不会给你效果。也许将父级设置为固定位置，将子级设置为绝对位置和适当的z-index？

一个例子：

.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; }

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

5 个答案:

z索引