用 iframe 解决下拉框与层之冲突
发布时间：2006-07-08 09:50:11 来源：天极网 网友评论 0 条 问题提出：我用dw做了一个下拉菜单，但是碰到form的列表项就跑到下面去了，请帮忙解决，请看问题图示
解决问题：由于层与下拉框之间的优先级是：下拉框 > 层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的 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="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="#" onclick="document.getElementById('menu').style.visibility='visible'">menu</a> <form> <select><option>A form selection list</option></select> </form> |
用 iframe 解决下拉框与层之冲突——新版网页陶吧上线了，点击这里进入新版网页陶吧……
- 推荐阅讯
- CSS属性中Display与Visibility的不同
- CSS实现导航条图片的翻转菜单
- 运用表单file输入框获取文件对象
- 玩转CSS CSS精彩实例教程(二)
- CSS垂直树形下拉菜单
- CSS布局入门
- 网页表单项Input的高级限制级用法
- CSS初级入门：文字的属性
- CSS初级入门：样式的多次声明
- 完全用CSS实现的中英文双语导航菜单
- 阅读排行
- 1.如何使用CSS来进行网页排版
- 2.CSS样式表教程-If you love css …
- 3.CSS用样式表美化你的网页
- 4.网页制作：几种所见所得的WEB在线编辑器
- 5.网页常见可用性错误——表单组件错误
- 6.CSS+JavaScript打造超酷右键菜单
- 7.针对浏览器隐藏CSS之九大技巧
- 8.DIV＋CSS网页布局入门
- 9.搜索引擎的蜘蛛人（ROBOTS）秘密
- 10.CSS垂直树形下拉菜单
- 专题教程
- Windows Server-Windows Server文档-Windows Server新闻-Windows Ser PostgreSQL-PostgreSQL文档-PostgreSQL新闻-PostgreSQL专家
- WebLogic-WebLogic文档-WebLogic新闻-WebLogic专家 FreeBSD-FreeBSD文档-FreeBSD新闻-FreeBSD专家
- Linux-内核 GUI KDE Gnome DNS FTP 安全 安装-Linux专区 Windows-AD IIS ServerCore 虚拟化 安全 HPC-Windows专区
- 大话G游 专题：手机病毒揭密
- ARP攻击防范与解决方案 路由故障处理手册