当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > 用 iframe 解决下拉框与层之冲突

Dreamweaver
Dreamweaver 限制访问的BUG
Dreamweaver 数据库路径的使用
用Dreamweaver做搜索表单
Dreamweaver 事件简述
[Dreamweaver教程]Meta标签详解
提高 Dreamweaver行为全接触(5)
提高 Dreamweaver行为全接触(1)
提高 Dreamweaver行为全接触(3)
提高 Dreamweaver行为全接触(2)
提高 Dreamweaver行为全接触(4)
Dreamweaver MX2004视频宝典教程(7) Dreamweaver安装与启动
Dreamweaver MX2004视频宝典教程(9) 工作区结构
Dreamweaver MX2004视频宝典教程(5) 配色原则
Dreamweaver MX2004视频宝典教程(4) 网页布局
Dreamweaver MX2004视频宝典教程(8) Dreamweaver文档使用
Dreamweaver MX2004视频宝典教程(10) 菜单概述
Dreamweaver MX2004视频宝典教程(3) 网页的基本元素
Dreamweaver MX2004视频宝典教程(6) HTML与渲染
Dreamweaver MX2004视频宝典教程(1) 课程简介
Dreamweaver MX2004视频宝典教程(2) 网站与网页的概述

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 37 ::
收藏到网摘: n/a

问题提出:我用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>