Div Select擋住的解決辦法

2019-11-21 01:40:16

字體：大中小

來源：轉載

供稿：網友

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Div下拉菜單被Select擋住的解決辦法</title>
</head><body>
<div style="z-index: 10; position: absolute; width: 100; height: 18; overflow: hidden;"
    onmouseover="this.style.height=100;" onmouseout="this.style.height=18;">
    <iframe style="position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;
        left: 0; scrolling: no;" frameborder="0" src="about:blank"></iframe>
    <div style="background-color: silver;">
        下拉菜單<br />
        bbbbbbb<br />
        ccccccc<br />
        ccccccc<br />
        ccccccc<br />
        ccccccc
    </div>
</div>
<select style="width: 200">
    <option>test0</option>
    <option>test1</option>
    <option>test2</option>
    <option>test3</option>
</select>
<br />
<pre>
Div被Select擋住，是一個比較常見的問題。
有的朋友通過把div的內容放入iframe或object里來解決。
可惜這樣會破壞頁面的結構，互動性不大好。
這里采用的方法是：
雖說div直接蓋不住select
但是div可以蓋iframe，而iframe可以蓋select,
所以，把一個iframe來當作div的底，
這個div就可以蓋住select了.
</pre>
</body></html>

上一篇：二級域名或跨域共享Cookies的實現方法

下一篇：javascript 輸入框提示列表效果