html 下拉组件被下面的组件挡住,div被select下拉框挡住了--5种解决方法

在IE中,select属于window类型控件，它会“挡住”所有非window类型控件

可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，

他们被渲染在客户区的绘画表面上，

而select是使用的标准windows控件，只是作为客户区的子控件放置而已，

它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，

比如iframe和其他的select，如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。

有多种种办法;

1. 修改select，不用标准select，而是自己用其他html元素模拟

2. 修改你的div，使用iframe。

3. 在div被显示的时候或者到达select所在位置时隐藏select

4. 在div中或div的同一坐标上，用相同尺寸的iframe先遮挡一下，然后在iframe上显示div的内容。

5.Object对象的优先度较高,可以挡住select框

以下例子系网上资源整理

原址：http://hi.baidu.com/suofang/blog/item/72f2f7ed23f2324e78f055c4.html

第4种方法的例子：最好的方法：iframe来当作div的底

Div被Select挡住，是一个比较常见的问题。

有的朋友通过把div的内容放入iframe或object里来解决。

可惜这样会破坏页面的结构，互动性不大好。

这里采用的方法是：

虽说div直接盖不住select

但是div可以盖iframe，而iframe可以盖select,

所以，把一个iframe来当作div的底，

这个div就可以盖住select了.

A Select Box is Born ....

.... and a DIV can cover it up
through the help of an IFRAME.

Click to show DIV.

Click to hide DIV.

第3种方法的例子：最直接的方法:隐藏下拉框.

下面提供的是一个比较通用的一组函数:

test.htm

------------

点击让select隐藏

以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.

第2种方法：用iframe作载体

以下是一简单的例子:

-----------

简单菜单

#div1{

position:absolute;

z-index:100;

width:100;

height:130;

background-color:#d2e8ff;

border:1 solid black;

}

div{cursor:hand;font-size:12px;}

a{text-decoration:none;color:red;font-size:12px}

-->

position:absolute;

z-index:100;

width:100;

height:130;

background-color:#d2e8ff;

border:1 solid black;

}

div{cursor:hand;font-size:12px;}

a{text-decoration:none;color:red;font-size:12px}

中国程序员

sohu

第5种方法：Object对象的优先度较高,可以挡住select框

hellohellohellohellotest

这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法.

html 下拉组件被下面的组件挡住,div被select下拉框挡住了--5种解决方法相关推荐

需要计算机安装msxml,Win7安装Office2010提示让安装MSXML组件的五种解决方法
在安装office2010的的时候,有时候会提示"安装错误.若要安装Microsoft office2010 需要在计算机上安装 MSXML版本6.10.1129.0.请安装此组件,然后重新 ...
Win7 10安装Office2010提示让安装MSXML组件的五种解决方法
在安装office2010的的时候,有时候会提示"安装错误.若要安装Microsoft office2010 需要在计算机上安装 MSXML版本6.10.1129.0.请安装此组件,然后重新 ...
bootstrap select下拉框模糊搜索和动态绑定数据解决方法
bootstrap select下拉框模糊搜索和动态绑定数据解决方法参考文章: (1)bootstrap select下拉框模糊搜索和动态绑定数据解决方法 (2)https://www.cnblog ...
html 下拉组件被下面的组件挡住,select挡住div的5种解决方法
在IE中,select属于window类型控件,它会"挡住"所有非window类型控件可以这么理解,div这样的组件是在浏览器客户区使用代码"渲染"的, 他们 ...
win7下提示未安装html5,win7系统提示Internet快捷方式http协议没有已注册的程序的解决方法...
win7系统使用久了,好多网友反馈说win7系统提示Internet快捷方式http协议没有已注册的程序的问题,非常不方便.有什么办法可以永久解决win7系统提示Internet快捷方式http协议没 ...
关闭自动降频 linux,在Deepin系统下CPU不能自主降频的两种解决方法
如果你在Deepin系统下遇到CPU不能自主降频的问题,可用以下两种方法来解决.因为测试了一下针对笔记本装Deepin系统有时候遇到不能自主降频的问题,导致温度过高,结果用解决方法一处理好了.相关参考 ...
linux下QT工程调用opencv、libtorch，并用cmake编译，及其遇到的一些问题的解决方法
linux下QT工程调用opencv.libtorch,并用cmake编译: 文章目录一.新建QT工程二.编写CMakeLists.txt文件三.各个文件的内容如下: 1.mainwindow. ...
html下拉选择图片,图片+JavaScript+CSS打造漂亮的select下拉选择框
下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px; ...
C# ASP.NET B/S模式下，采用lock语法实现多用户并发产生不重复递增单号的一种解决方法技术参考...
往往我们在开发程序.调试程序时,无法模拟多用户同时操作的实际环境下的运行情况. 为了模拟多用户并发操作,我们先写个多线程的例子来充分模拟多用户并发的情况 Code highlighting produ ...

html 下拉组件被下面的组件挡住,div被select下拉框挡住了--5种解决方法

html 下拉组件被下面的组件挡住,div被select下拉框挡住了--5种解决方法相关推荐

最新文章

热门文章