首先写一个简单的方法:
.wrap{ position:relative;}.
<div class="wrap" >
<iframe frameborder="0 " style= "position:absolute;visibility: inherit;top:0px;left:0px;width:100%;z-index:-1;">
</iframe>
<!--这里是要写的内容,可以是图片或者文字-->
<div>
主要就是利用了iframe比select更高级别。
下面是一篇转贴,也不知道谁是最初的作者:收录过来,是用js写的。
=====================
由于IE存在一个bug,会使得DIV层无法遮盖select控件。
我今天说的解决方法是用iframe找到的。其实这个问题的解决方法我今天在网上搜也会很多,不过大部分都是直接用html来实现的。但在实际应用中,我们会更倾向与用js动态生成对象来进行封装。
首先这个实现方式是从google-suggest那得到的启发,起初看suggest的js代码的时候,发现它里面用到了iframe,但是不清楚和div究竟是怎么关联上而又不互相影响的。昨天突然想到可以用selenium的viewdom模块看到其生成的dom对象是如何的,后来发现,suggest是通过两个div来实现的,一个专门用于包含iframe,一个专门用于表现数据,然后再将这两个div重叠即可。很巧妙,但是我怎么没想到。这就应了那句话:简单的才是美的。
现在开始说代码,hoho。
首先是用于遮盖select的层:s
// 创建层
var s=document.createElement("DIV");
// 设置层的相关属性
s.style.visibility="";
// 定义层的样式
s.style.position="absolute";
s.style.left="200";
s.style.top="100";
s.style.width="500";
s.style.height="90";
s.style.border="black 1px solid";
s.style.backgroundColor="white";
// 生成iframe
var L=document.createElement("IFRAME");
L.name="completionFrame";
// 定义iframe的样式,宽高与s相同
L.width=s.style.width;
L.height=s.style.height;
// 附加L到s
s.appendChild(L);
// 显示s
document.body.appendChild(s);
其次是你要表现数据的DIV层:t
js如下:
// 创建层
var t=document.createElement("DIV");
// 设置相关属性
t.style.visibility="";
t.zIndex=1;
// 定义样式表,长宽高和定位等
t.style.position="absolute";
t.style.left="200";
t.style.top="100";
t.style.width="500";
t.style.height="90";
t.style.border="blue 1px solid";
t.style.backgroundColor="white";
// 定义你要表现的内容
t.innerHTML = "Hello World";
// 显示
document.body.appendChild(t);
这样就大功告成了,经过测试,在ie和firefox下都是可以的。
这里有几个问题需要说明一下: