div盖住select的方法

一、原理
由于html中div组件没有select组件优先级高。

二、方法

1、div的内容放入iframe或object里来解决，缺点：破坏页面的结构，互动性不大好。

2、div直接盖不住select ，但是div可以盖iframe，
   而iframe可以盖select,  所以，把一个iframe来当作div的底，  
   这个div就可以盖住select了

3、实现
未解决：

引用

<div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">
<table>
<tr><td>item 1</td></tr>
<tr><td>item 2</td></tr>
<tr><td>item 3</td></tr>
<tr><td>item 4</td></tr>
<tr><td>item 5</td></tr>
</table>
</div>

<a href="#" onclick="document.getElementById('menu').style.visibility='visible'">menu</a>

<form>
<select><option>A form selection list</option></select>
</form>

解决：

引用

<div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">
<table>
<tr><td>item 1</td></tr>
<tr><td>item 2</td></tr>
<tr><td>item 3</td></tr>
<tr><td>item 4</td></tr>
<tr><td>item 5</td></tr>
</table>
<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>

<a href="#" onclick="document.getElementById('menu').style.visibility='visible'">menu</a>

<form>
<select><option>A form selection list</option></select>
</form> 

评论

2 楼 falchion 2008-09-24  

http://htmlplayground.com/这个网站的对话框也是用iframe做的

1 楼 playfish 2008-04-11  

我记得有一个jQuery的一个叫superfish的菜单插件对于这个使用div，iframe来盖住select的效果做得很到位，建议可以去jquery搜索一下。