select覆盖div的解决方案

最新推荐文章于 2022-07-28 11:32:41 发布
最新推荐文章于 2022-07-28 11:32:41 发布 · 77 阅读 · 0
文章标签：

#javascript #ViewUI

本文介绍了一种通过在页面上放置一个透明的iframe来实现让div元素覆盖在select元素之上的方法。这种方法利用了iframe可以被div完全覆盖的特性，从而解决div无法直接覆盖select的问题。
<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>前加入上面的语句
虽说div直接盖不住select
但是div可以盖iframe，而iframe可以盖select,
所以，把一个iframe来当作div的底，
这个div就可以盖住select了.

版权声明：本文为博主原创文章，未经博主允许不得转载。

iteye_11495
关注
ie6下select覆盖div的解决办法
12-24
由于iframe自身形成一个新的层叠上下文，它可以防止Select覆盖Div。不过这种方法可能会影响页面性能，且在某些情况下可能产生兼容性问题。 3. **CSS Hack**：IE6识别一些特定的CSS hack，比如`*html`或者`_width`。...
IE6下Select元素被div等元素覆盖的解决办法
09-25
但这种方法在菜单项较多时可能会导致明显的加载延迟，因此建议在非必要情况下不使用该控件，或者寻找其他的解决方案。 以上就是针对IE6下select元素被div等元素覆盖的常见解决方法。需要注意的是，由于IE6已经是一...
IE6中Div 遮罩层覆盖不住select控件的解决方法
每天=生命的最后一天
12-19 7772
      又是一周干着测试员的工作，没有任何任务安排，只得自己找bug来填充每天的日子。       突然想到上次在演示的时候，看到在IE6下同事自己写的弹出提示框无法遮住select下拉选择框的问题。当时是去掉了那个下拉框来解决这个问题，但是页面还有很多地方用到这个提示框。       用IE6运行一下发现很多页面都存在这个问题。       后来同事说在每个页面跳用这个函数之前隐
IE6 Select元素无法被div等元素覆盖的bug解决办法
boral_li的专栏
04-30 5297
     在页面设计时，经常会使用div制作蒙版或模拟弹出窗口，但在IE6下，当div下方有下拉列表框select元素的时候，下拉列表框会划破div显示在div之上，不论z-index设为何值均会出现此问题，可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑，div 无法覆盖select,但是iframe 可以覆盖select，而div可以覆盖iframe，所以
弹出层Div 覆盖不住select控件的解决方法
abxn2002的专栏
08-03 1195
转载地址: http://1day.zone.ku6.com/entry/56260.html http://www.cnblogs.com/lovko/archive/2009/04/08/1431536.html div挡住select的5种方法   弹出层Div 覆盖不住select控件的解决方法 关键字: 弹出层div 覆盖不住select控件的解决方法
div盖住select的方法
欢迎你来到飞扬博客
04-10 323
一、原理 由于html中div组件没有select组件优先级高。 二、方法 1、div的内容放入iframe或object里来解决，缺点：破坏页面的结构，互动性不大好。 2、div直接盖不住select ，但是div可以盖iframe， 而iframe可以盖select, 所以，把一个iframe来当作div的底， 这个div就可以盖住select了 ...
Div Select挡住的解决办法
12-11
在示例代码中，`Div`元素的`z-index`设置为10，理论上它应该在页面上层，但由于浏览器的渲染机制，`Div`仍然无法覆盖`Select`。 解决这个问题的一种巧妙方法是在`Div`内部添加一个透明的`Iframe`元素，将`Iframe`的...
跨浏览器兼容的div覆盖select元素的技术方案
总结来说，让`div`浮动在`select`之上并实现多浏览器兼容的解决方案需要综合运用CSS布局、定位、`z-index`属性以及JavaScript的动态控制，同时还需考虑到浏览器特定的渲染规则和兼容性问题。通过细致地调整和测试，...
解决IE6中Select覆盖div的Z-Index问题
5. 对于其他的解决方案，需要相应地调整`div.htm`和`js`中的代码。 ### 总结 IE6浏览器的Select元素层叠问题主要是由于其对Z-Index属性的特殊处理所导致。解决这一问题需要采用一些特殊的技术和方法。在实际开发...
html中一个div层在另外一个div或者img上显示
04-23
NULL 博文链接：https://1526541841.iteye.com/blog/2262488
select网页下拉列表与div层遮盖问题
12-12
在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于select元素的两个小问题，这里进行一下总结。 第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果你在FirFox下和IE7下看都 在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于select元素的两个小问题，这里进行一下总结。 相关文章：div层被flash层遮盖问题解决思路 第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果
div遮盖select的解决方案(简单)
Jiao2_vc的专栏
05-10 1223
IE6以及一下版本下，选择框Select会覆盖Div中的内容一般情况下，可以将显示的内容放到Iframe中，然后再显示框架内的内容。由于Iframe的可以显示在Select上层，就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架即可，不用修改其他内容。加了句这个：  在IE里，层DIV被下拉框SELECT遮盖，这是I
div挡住select的5种方法
weixin_33929309的博客
08-06 107
在IE中,select属于window类型控件，它会“挡住”所有非window类型控件可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，他们被渲染在客户区的绘画表面上，而select是使用的标准windows控件，只是作为客户区的子控件放置而已，它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，比如iframe和其他的select，如果你使用过...
Vue让Select下拉框超出div
菲律宾铁猴子的博客
04-25 1125
在select中添加参数transfer即可，如下： <Select v-model="areaUnit" style="width:200px" transfer > <Option v-for="item in areaUnitList" :value="item" :key="item" >{{ item }}</Op
【小技巧】Select下拉列表覆盖DIV菜单的另类解决方案
DrifterJ's Stash
10-19 3694
最近在工作中接触到了这样一个问题：当把用于选择尺寸的下拉列表（html select标签实现）打开后，不选择，然后移动鼠标到页面头部的菜单栏，此时菜单栏接受onmouseover事件，显示一个DIV实现的菜单，但这个操作并没有将页面焦点从select上移开，即select依然处于打开状态，问题出现了，打开的option列表覆盖住了弹出的菜单！用户体验不好。 这个问题的本质原因是，在浏览器中，se
2022-07-28 xm-select 的使用
ZT1090258642的博客
07-28 9011
文档。
解决DIV层被Select覆盖的问题
jiataibin的专栏
07-26 363
参考一下资料: 1. http://blog.youkuaiyun.com/URL/archive/2005/04/27/365525.aspx 2. http://www.leeyupeng.com/?p=258 综合这两篇文章的内容,可以很轻易的解决上述问题. 在IE里，层DIV被下拉框SELECT遮盖，这是IE的bug之一，原因在于sel...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值