Html 固定位置 Div 总是出现在顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5702050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed position Div ALWAYS appear on top?
提问by Jon Kyte
I Have a fixed position tag that is styled as follows within my CSS:
我有一个固定位置标签，在我的 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.
我的网站上有一个 flash (.swf) 标题图像，当浏览器的分辨率足够低时，facebook div 会被 flash 标题部分隐藏。
Here is my HTML:
这是我的 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?
我如何获得它以便我的 facebook 固定位置 div 始终显示在此 .swf 内容之上？
Thanks in advance
提前致谢
Jon
乔恩
采纳答案by Cristian Necula
If the content is obstructed by flash, even with a correct z-index, add wmode="transparent"to the flash embed script.
如果内容被 Flash 遮挡，即使 z-index 正确，也请添加wmode="transparent"到 Flash 嵌入脚本中。
回答by Robert Koritnik
z-index
z-索引
Use CSS style z-indexthat sets vertical order of your elements. And give it a high enough value so it will always display on top:
使用z-index设置元素垂直顺序的CSS 样式。并给它一个足够高的值，以便它始终显示在顶部：
#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.
元素通常根据它们的自然 HTML 流呈现（以简化它并根据垂直顺序）。所以后面定义的元素会渲染在前面的元素之上。
回答by Chirag Khatsuriya
You can use CSS style z-Index to show your menu on top.
您可以使用 CSS 样式 z-Index 在顶部显示您的菜单。
#menu
{
z-index: 100;
}
回答by Robert Norrman
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?
澄清一下：仅在固定元素上设置 z-index 不会解决问题。设置绝对位置不会给你之后的效果。也许将父级设置为固定位置，将子级设置为绝对位置和适当的 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; }
回答by diEcho
try with position: absolute;
尝试 position: absolute;
