Question

iframe框架 css+div布局问题

<div class="menu">
<iframe src="menu/menu.html" scrolling="no" frameborder="0" width="100%" height="100%" marginheight="0" marginwidth="0"></iframe>
</div>
<div class="slide">
<iframe src="slide/slide.html" scrolling="no" frameborder="0" width="100%" height="100%" marginheight="0" marginwidth="0"></iframe>
</div>

.menu{
border:thin;
height:75px;
z-index:10000;
}
.slide{
border:thin;
height:404px;
}

下拉菜单被遮住了 应该怎么写iframe 的css？

Answer 1

为什么menu你要用框架来引用？框架的大小没有办法自动伸缩的..除非用脚本去控制.
如果你想在其他页面都引用menu建议用include. 当然我是指动态页面.

<!-- #include file="menu/menu.html" -->
如果你想在静态页面引用menu用脚本是最合适的方法.

Answer 2

需要明白 z-index 只适用在 position为非static的元素。。

在未设置层级的时候，默认后者居上，后面的元素在前面的之上。。

解决方法

.menu{position:relative;}

Answer 3

.menu{position:absolute; z-index:2}

.slide{border:thin;height:404px; position:absolute;z-index:1} 叠层效果可以的

Answer 4

试一下设置.menu{ position:relative} 我的认知里z-index需要和定位结合使用

Answer 5

话说你加那么多框架干什么，在.menu{position:absolute; } 加个绝对定位试试

追问

还是不行。

加很多框架 是因为我要引用别的网页 有什么其他办法吗？

追答

有，用JS，把页面用JS写好，然后在页面调用js就可以了，反正我是很讨厌框架，像下面这样

document.write("<div class='nav'>");
document.write("<ul id='list_link'><li><a href='index.html'>首页</a></li><li><a href='xuexiaoJJ.html'>学校简介</a></li><li><a href='xingzheng.html'>行政机构</a></li><li><a href='zhuanyueSZ.html'>专业设置</a></li><li><a href='xiaoyuanXW.html'>校园新闻</a></li><li><a href='xuexiaoRY.html'>学校荣誉</a></li><li><a href='jiaoxueGW.html'>教学教务</a></li><li><a href='xueshengYD.html'>学生园地</a></li><li><a href='zhaoshengJY.html'>招生就业</a></li><li><a href='xiaoqi.html'>校企合作</a></li></ul>");
document.write("<p>贺州经济干校<br />www.hzjjgx.com</p>");
document.write("<div class='nav_bar'><img src='images/nav_left.gif' /></div>");
document.write("</div>");