您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> 网页制作技巧 >> 文章正文
[图文]用iframe解决下拉框与层之冲突           ★★★
用iframe解决下拉框与层之冲突
作者:netjc.co…  文章来源:netjc.com  点击数:  更新时间:2008-5-17 19:36:09 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:

问题提出:我用dw做了一个下拉菜单,但是碰到form的列表项就跑到下面去了,请帮忙解决,请看问题图示


用iframe解决下拉框与层之冲突


解决问题:由于层与下拉框之间的优先级是:下拉框 > 层,因此在显示的时候,会因为优先级的次序而会出现如上问题。(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中放一个优先级比下拉框更高的元素(iframe),从而解决此问题!具体解决代码如下:


<div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">
  <table>
  <tr><td>item 1</td></tr>
  <tr><td>item 2</td></tr>
  <tr><td>item 3</td></tr>
  <tr><td>item 4</td></tr>
  <tr><td>item 5</td></tr>
  </table>
  <iframe src="http://www.qqread.com/dreamweaver/2006/11/javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div>


<a href="http://www.qqread.com/dreamweaver/2006/11/#" onclick="document.getElementById('menu').style.visibility='visible'">menu</a>


<form>
  <select><option>A form selection list</option></select>
</form>

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:Rainsion    责任编辑:Rainsion  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章: 没有了
  • 最新文章
    相关文章
    再谈DW中文缩进实现技巧
    网站优化需要重要注意的几点事项
    在Dreamweaver中利用CSS样式表设置网页
    Dreamweaver代码片断提高css开发效率
    巧用DW判断字符串中是否有换行
    Dreamweaver使用CSS样式表设置网页文本格式
    解决Dreamweaver中关于应用CSS的小问题
    Dreamweaver解决网页制作中的空格问题
    Dreamweaver制作网页技巧20则
    CSS在Dreamweaver中无效的解决方法
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门