让你的DIV在下拉框的上面

        我们在作B/S开发的时候经常会遇到DIV层被下拉框遮挡的时候,这让我们很苦恼。无论我们怎么设置css样式都无济于事,因为selese元素的优先级要不div高。那么我们就要选用比select元素优先级还要高的元素来遮挡它。这时候我们想到了iframe。我们可以在div里加上iframe来实现这种效果。

        其实网上有很多类似的代码。但是iframe的大小设置是个问题,要做到和div的大小一样比较困难,这里展示一点小技巧。

就是用parentNode。具体的代码如下:

xml 代码
  1. <div   id="menu"   style="position:absolute;   visibility:hidden;   top:20px;   left:20px;   width:100px;   height:200px;   background-color:#6699cc;">      
  2.   <table>      
  3.   <tr><td>选项一</td></tr>      
  4.   <tr><td>选项二</td></tr>      
  5.   <tr><td>选项三</td></tr>      
  6.   <tr><td>选项四</td></tr>      
  7.   <tr><td>选项五</td></tr>      
  8.   </table>      
  9.   <iframe   src="" frameborder="0"  style="position:absolute;   visibility:inherit;   top:0px;   left:0px;   width:expression(this.parentNode.offsetWidth);   height:expression(this.parentNode.offsetHeight);   z-index:-1;   filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>      
  10.     
  11.   </div>       
  12.   <a   href="#"   onclick="document.getElementById('menu').style.visibility='visible'">菜单</a>     

       我们可以看到在设置style 的时候width:expression(this.parentNode.offsetWidth);表达式的方式。this.parentNode.offsetWidth就代表div的宽度

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值