投递文章投递文章 投稿指南 RSS订阅RSS订阅

用IFrame解决Div显示优先级问题

来源:未知 IT堂 发布时间:2016-05-04 收藏 投稿 字体:【
在网页上显示菜单一般会采用Div的方式,这样在菜单遇到[Select]下拉列表框等优先级高于Div的元素时,菜单就显示到这些优先级高的元素下面了(在这时的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.getElementByIdx('menu').style.visibility='visible'">menu</a>


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


顶一下
(0)
0%
踩一下
(0)
0%
本文Tags:
  • 表情:
  •    
  • 评价:
用户名: 密码: 匿名 注册
最新评论 查看所有评论
About iTtang - 联系我们  - 专题列表 - 友情链接  -  高级搜索  -  帮助中心  -  您的意见