div被遮挡怎么解决
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div被遮挡怎么解决相关的知识，希望对你有一定的参考价值。
网页上设置两个div，我想让导航div在下拉浏览器时固定子啊顶端。但是现在的情况是第一个div遮挡第二个div，下拉时无问题。
<html>
<head>
<style>
*
padding:0;
margin:0;
border:0;
#hd
position:fixed;
z-index:1;
top:0;
width:100%;
background-color:#be0028;
#nav
width:1000px;
margin:0 auto;
height:43px;
font-size:14px;
#nav a.logo
display:block;
float:left;
width:140px;
height:28px;
margin:8px 0 0 15px;
line-height:28px;
overflow:hidden;
#nav ul.nav_list
float:left;
#nav ul.nav_list li
float:left;
#nav a.nav-item
display:block;
height:43px;
padding:0 15px;
line-height:43px;
color:#fff;
#nav a.nav-item:hover, #nav a.hover
background-color:#a20022;
#real_header
position:absolute;
width:100%;
z-index:2;
background-color:#ccc;
#entry
margin:0 auto;
text-align:center;
background-color:#ccc;
</style>
</head>
<body>
<div id="real_header">
<div id="entry">
<p>This is welcome entry</p>
</div>
</div>
<div id="hd">
<div id="nav"> <a href="/" title="AAA" class="logo"><img src="../images/logo.png" alt="AAA" width="140" height="28" /></a>
<ul class="nav_list">
<li><a href="/" class="nav-item">首页</a></li>
</ul>
</div>
</div>
</body>
</html>
现在的问题如图：顶端是遮挡了
求解决。
我设置的导航栏高度是固定的，下面几位朋友的答案，都会更改第二个div的高度啊
再下面的div你需要margin-top:菜单div的高度，，，追问
我希望的是在顶端是灰色部分在上面，下拉时只显示红色的导航
追答你自己下载下来看看是不是这个意思，，不太明白你说什么了，听着听着就乱了。
我这样理解的，灰色的在下面，菜单在上面，然后，下拉的时候，只有灰色滚动，菜单固定在顶部，
如果是这样的话，那#real_header的z-index:就应该比#hd 的z-index小才会在#hd 下面
#real_header的z-index改成0，然后加多句：margin-top:43px;就是红色层的高度。
不好意思，我的意思是灰色部分在红色部分上面，当下拉时红色部分固定在浏览器顶端。
追答可以啊，，如果你灰色的只有这么高，当然可以啊，，
如果灰色高度超过了红色的，，，你觉得下拉后，红色的还能显示吗？
如果是这样，，你只需要把红色的margin-top:灰色高度就行 了。
#hd的z-index要比#real_header高才可以的，追问
这样设置的话，完全看不到另外一个div层了
div层或dialog被flash遮挡的解决办法
flash的wmode属性：
"Window " 在 Web 页上用影片自己的矩形窗口来播放应用程序，并且始终位于最顶层。 "Opaque " 显示页面上位于它后面的内容。 "Transparent "使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。
"Opaque "和"Transparent "都 可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而"opaque"则不会显示。
如果忽略此属性，默认值为 Window。仅适用于object。
Window速度快、有效率，但无法使用z-index，也没有办法混用于DHTML图层当中，这就是为什么常有人在抱怨自己的下拉菜单跑到Flash后面。
Opaque除了可以让你正确控制z-index的样式，也可以透过Javascript來控制它的大小或是移动swf的位置！不过要注意，Opaque的背景可是没有办法透明的，也就是说，任何內容都会被放在swf下面。
至于Transparent，想当然，就是把Flash的背景变成透明。让swf档案可以融入网页当中而不会出现讨厌的白底，不过，transparent在IE里面是真的透明，也就是说，下面的网页內容是可以被选取起來的，但是在FF里面，就很讨厌了，因为虽然看起來透明，但是滑鼠卻无法点选。另外，要稍微注意的是，使用这个值，会让你的flash影片变得比较慢！
解决方法：
设置Flash置底，加句代码 ：<param name="wmode" value="opaque" /> ，但此代码只能在IE下生效，还要在 <embed > 标签里添加 wmode="opaque" ，才能让Firefox等生效，完整代码如下：
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=" width="600″ height="248″>
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="test.swf">
<param name="quality" value="high">
<param name="wmode" value="Opaque">
<embed src="test.swf" wmode="Opaque" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600″ height="248″></embed>
</object>
再注：红色代码：解决IE下的遮挡层问题；蓝色代码：解决Firefox下的遮挡层问题。
以上是关于div被遮挡怎么解决的主要内容，如果未能解决你的问题，请参考以下文章