使div浮动层显示在Select组件上面
2010-10-15 15:15
169 查看
这个也是现学现卖了,没有什么特好的方法,先看一下博主的这个吧
一、发现问题
问题:绿色的浮动层被select组件“咬掉了一块”。
代码部分:浮动层
<div class="submenutvc" id="tvc" >
<dl><a href="#">汽车</a></dl>
<dl><a href="#">化妆品</a></dl>
<dl><a href="#">房地产</a></dl>
<dl><a href="#">日用品</a></dl>
</div>
二、找到方法
上网搜索了一下之后发现,这个是html语言的通病,只能通过某些优先级更加高的组件来遮盖。
在CSDN社区里看到有人给出解决方案:
引用内容
Div被Select挡住,是一个比较常见的问题。
有的朋友通过把div的内容放入iframe或object里来解决。
可惜这样会破坏页面的结构,互动性不大好。
这里采用的方法是:
虽说div直接盖不住select
但是div可以盖iframe,而iframe可以盖select,
所以,把一个iframe来当作div的底,
这个div就可以盖住select了.
1"iframe 做为层的载体"后,
层与主页面的互动是窗口间的互动
2“用一个iframe当div的底”后,
层与主页面的互动是窗口内的互动
另外,对于方法1,
层的大小变化就会要求iframe的大小随着变化
从主页面到这个层会导致window的blur.
对于方法2,
只是在原有的div前加上这一句
<iframe style="position:absolute;z-index:9;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0" ></iframe>
试用大家的方法之后发现还是有一点小问题,出来的是白色浮动,而不是本来应该出来的绿色浮动层。
问题依然存在:
三、调试完成
最后发现应该稍作修改,一下代码是最终的方案:
1、在iframe的style里面一定要加上z-index而且要设为-1,这样它就不会把原来的div层也一起覆盖掉。
2、把<iframe></iframe>放在div层的上面就可以了。
程序代码:
<iframe style="position:absolute;z-index:-1;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0">
</iframe>
<div class="submenutvc" id="tvc">
<dl><a href="#">汽车</a></dl>
<dl><a href="#">化妆品</a></dl>
<dl><a href="#">房地产</a></dl>
<dl><a href="#">日用品</a></dl>
</div>
一、发现问题
问题:绿色的浮动层被select组件“咬掉了一块”。
代码部分:浮动层
<div class="submenutvc" id="tvc" >
<dl><a href="#">汽车</a></dl>
<dl><a href="#">化妆品</a></dl>
<dl><a href="#">房地产</a></dl>
<dl><a href="#">日用品</a></dl>
</div>
二、找到方法
上网搜索了一下之后发现,这个是html语言的通病,只能通过某些优先级更加高的组件来遮盖。
在CSDN社区里看到有人给出解决方案:
引用内容
Div被Select挡住,是一个比较常见的问题。
有的朋友通过把div的内容放入iframe或object里来解决。
可惜这样会破坏页面的结构,互动性不大好。
这里采用的方法是:
虽说div直接盖不住select
但是div可以盖iframe,而iframe可以盖select,
所以,把一个iframe来当作div的底,
这个div就可以盖住select了.
1"iframe 做为层的载体"后,
层与主页面的互动是窗口间的互动
2“用一个iframe当div的底”后,
层与主页面的互动是窗口内的互动
另外,对于方法1,
层的大小变化就会要求iframe的大小随着变化
从主页面到这个层会导致window的blur.
对于方法2,
只是在原有的div前加上这一句
<iframe style="position:absolute;z-index:9;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0" ></iframe>
试用大家的方法之后发现还是有一点小问题,出来的是白色浮动,而不是本来应该出来的绿色浮动层。
问题依然存在:
三、调试完成
最后发现应该稍作修改,一下代码是最终的方案:
1、在iframe的style里面一定要加上z-index而且要设为-1,这样它就不会把原来的div层也一起覆盖掉。
2、把<iframe></iframe>放在div层的上面就可以了。
程序代码:
<iframe style="position:absolute;z-index:-1;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);" frameborder="0">
</iframe>
<div class="submenutvc" id="tvc">
<dl><a href="#">汽车</a></dl>
<dl><a href="#">化妆品</a></dl>
<dl><a href="#">房地产</a></dl>
<dl><a href="#">日用品</a></dl>
</div>
相关文章推荐
- 如何让浮动的div层显示在select组件的上面
- 如何让浮动的div层显示在select组件的上面
- 使div浮动层显示在Select组件上面
- 使div浮动层显示在Select组件上面
- 使div浮动层显示在Select组件上面
- IE select 控件总在div的上面显示的BUG修正
- jQuery实现的浮动层div浏览器居中显示效果
- 让几个横向排列的浮动(float:left)的div居中显示。
- 限制select显示条数:div完全模拟select
- 让多个div显示在一行(浮动的div)
- div没有设置高度时背景颜色不显示(浮动)
- 基于JQuery的浮动DIV显示提示信息并自动隐藏
- 通过select下拉框里的value控制div显示与隐藏
- 浮动的div层置顶显示
- ie 浏览器 使 div 浮动到 3d 上面
- [置顶]给GridView加点料:Div动态浮动显示
- 通过select下拉框里的value控制div显示与隐藏
- 鼠标指向GridView某列显示DIV浮动列表
- div浮动到img上面
- JQuery 浮动DIV显示提示信息并自动隐藏