61,112
社区成员
发帖
与我相关
我的任务
分享关于DIV盖住IFRAME中的DIV问题
现有两个页面分别是主页面index.html子页面mianbao.html
index.html源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
</head>
<body>
<iframe frameborder='0' marginheight='0' marginwidth='0' name='head' scrolling='no' src='mianbao.html' width='980px' height='100px' ></iframe>
<div >
<p>主页面</p>
</div>
</body>
</html>
mianbao.html源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
if(state)
{
DivRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
}
}
</script>
</head>
<body>
<div class="logoMenu_img" onmouseover="DivSetVisible(true)">
<img src="menu_window_bg02.gif" width="71" height="21" border="0" alt="点击此处隐藏菜单"></a>
</div>
<div id="PopupDiv" onmouseout="DivSetVisible(false)">
<ul>
<li><a href="test1" target="_blank">test1</a></li>
<li><a href="test2" target="_blank">test2</a></li>
<li><a href="test3" target="_blank">test3</a></li>
<li><a href="test4" target="_blank">test4</a></li>
<li><a href="test5" target="_blank">test5</a></li>
<li><a href="test5" target="_blank">test6</a></li>
<li><a href="test5" target="_blank">test7</a></li>
<li><a href="test5" target="_blank">test8</a></li>
<li><a href="test5" target="_blank">test9</a></li>
<li><a href="test5" target="_blank">test10</a></li>
<li><a href="test5" target="_blank">test11</a></li>
<li><a href="test5" target="_blank">test12</a></li>
<li><a href="test5" target="_blank">test13</a></li>
<li><a href="test5" target="_blank">test14</a></li>
<li><a href="test5" target="_blank">test15</a></li>
</ul>
</div>
</body>
</html>
问题是：
现在显示效果是PopupDiv部分会显示会被主页面遮盖。希望的效果是，当鼠标滑动显示PopupDiv时显示在主页面的上层
要求：
不改变主页面和子页面的结构，即主页面就是要嵌套iframe，子页面要用div。
index.html源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
</head>
<body>
<iframe frameborder='0' marginheight='0' marginwidth='0' name='head' scrolling='no' src='mianbao.html' width='980px' height='100px' ></iframe>
<div >
<p>主页面</p>
</div>
</body>
</html>
mianbao.html源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
if(state)
{
DivRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
}
}
</script>
</head>
<body>
<div class="logoMenu_img" onmouseover="DivSetVisible(true)">
<img src="menu_window_bg02.gif" width="71" height="21" border="0" alt="点击此处隐藏菜单"></a>
</div>
<div id="PopupDiv" onmouseout="DivSetVisible(false)">
<ul>
<li><a href="test1" target="_blank">test1</a></li>
<li><a href="test2" target="_blank">test2</a></li>
<li><a href="test3" target="_blank">test3</a></li>
<li><a href="test4" target="_blank">test4</a></li>
<li><a href="test5" target="_blank">test5</a></li>
<li><a href="test5" target="_blank">test6</a></li>
<li><a href="test5" target="_blank">test7</a></li>
<li><a href="test5" target="_blank">test8</a></li>
<li><a href="test5" target="_blank">test9</a></li>
<li><a href="test5" target="_blank">test10</a></li>
<li><a href="test5" target="_blank">test11</a></li>
<li><a href="test5" target="_blank">test12</a></li>
<li><a href="test5" target="_blank">test13</a></li>
<li><a href="test5" target="_blank">test14</a></li>
<li><a href="test5" target="_blank">test15</a></li>
</ul>
</div>
</body>
</html>
问题是：
现在显示效果是PopupDiv部分会显示会被主页面遮盖。希望的效果是，当鼠标滑动显示PopupDiv时显示在主页面的上层
要求：
不改变主页面和子页面的结构，即主页面就是要嵌套iframe，子页面要用div。
...全文
请发表友善的回复…
发表回复
CHENWERY 2010-10-26
- 打赏
- 举报
楼上就是说你这样的思路就算弄出来了也不是好的作品，有简单的方法你不用偏要用复杂的方法吧。
你加个图片之后也要设置z-index的。
你加个图片之后也要设置z-index的。
redwu99 2010-10-26
- 打赏
- 举报
大道理谁都懂。楼上想说明撒？想说明我的要求是不可实现的任务吗？
redwu99 2010-10-25
- 打赏
- 举报
试了一下。效果没有实现啊。你在主页面那放的文字好像有效果了。但是在主页面放个图片会发现。效果根本没有实现。弹出的div会被主页面覆盖
碧海情天-赵亮 2010-10-25
- 打赏
- 举报
好好想想我话的道理。你这样曲拐八弯利用不正常不自然手段实现的，一旦修改维护，就又是麻烦。
工作不是应付今天就拉倒的。为了明天和后天大后天自己能轻松点，也应该把昨天的作业修改一下。
工作不是应付今天就拉倒的。为了明天和后天大后天自己能轻松点，也应该把昨天的作业修改一下。
碧海情天-赵亮 2010-10-25
- 打赏
- 举报
条条大路通罗马＝＝＝＝我没说外星语。我用五笔打字，笔误。
碧海情天-赵亮 2010-10-25
- 打赏
- 举报
事先要知道这个结果，然后选择合适的方法。
明知道前面是个死胡同，硬去走，当然，你是可以撞破墙的（实际上，你是抓别人来替你撞破这墙），可是总这么做事，不别扭吗？
条知大路通罗马，但我们还是都喜欢选近的快的。哪里错了就改哪里，不要硬坚持。
明知道前面是个死胡同，硬去走，当然，你是可以撞破墙的（实际上，你是抓别人来替你撞破这墙），可是总这么做事，不别扭吗？
条知大路通罗马，但我们还是都喜欢选近的快的。哪里错了就改哪里，不要硬坚持。
redwu99 2010-10-23
- 打赏
- 举报
我自己顶一下。没有帮我解决吗？
CHENWERY 2010-10-23
- 打赏
- 举报
你的iframe设置了固定的宽和高，这样无论如何里面的内容都在那个固定的区域（width='980px' height='100px' ）里显示了，你的PopupDiv超出的部分无法显示。
把index.html改成如下：
-------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
</head>
<body>
<iframe frameborder='0' marginheight='0' marginwidth='0' name='head' scrolling='no' src='mianbao.html' width='480px' height='350' style="position:absolute;z-index:-1;"></iframe>
<div style="position:absolute;top:50px;left:0px;z-index:1;">
<p>主页面<br />http://topic.csdn.net/u/20101022/19/da768967-2393-4c20-9760-3bbfb7f90bbd.html?79786</p>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------
也就是上面设置了index中div的层在下面，而iframe的层在上面。
iframe的宽和高我都重新设置了。
关于index中的div的定位你还可以按自己的需要设置。
不过，我个人认为这个功能不必嵌套iframe来实现。
把index.html改成如下：
-------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
</head>
<body>
<iframe frameborder='0' marginheight='0' marginwidth='0' name='head' scrolling='no' src='mianbao.html' width='480px' height='350' style="position:absolute;z-index:-1;"></iframe>
<div style="position:absolute;top:50px;left:0px;z-index:1;">
<p>主页面<br />http://topic.csdn.net/u/20101022/19/da768967-2393-4c20-9760-3bbfb7f90bbd.html?79786</p>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------
也就是上面设置了index中div的层在下面，而iframe的层在上面。
iframe的宽和高我都重新设置了。
关于index中的div的定位你还可以按自己的需要设置。
不过，我个人认为这个功能不必嵌套iframe来实现。
