Div Select擋住的解決辦法
更新時(shí)間:2008年08月07日 14:38:16 作者:
但是div可以蓋iframe,而iframe可以蓋select,
所以,把一個(gè)iframe來當(dāng)作div的底,
<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擋住,是一個(gè)比較常見的問題。
有的朋友通過把div的內(nèi)容放入iframe或object里來解決。
可惜這樣會(huì)破壞頁面的結(jié)構(gòu),互動(dòng)性不大好。
這里采用的方法是:
雖說div直接蓋不住select
但是div可以蓋iframe,而iframe可以蓋select,
所以,把一個(gè)iframe來當(dāng)作div的底,
這個(gè)div就可以蓋住select了.
</pre>
</body></html>
<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擋住,是一個(gè)比較常見的問題。
有的朋友通過把div的內(nèi)容放入iframe或object里來解決。
可惜這樣會(huì)破壞頁面的結(jié)構(gòu),互動(dòng)性不大好。
這里采用的方法是:
雖說div直接蓋不住select
但是div可以蓋iframe,而iframe可以蓋select,
所以,把一個(gè)iframe來當(dāng)作div的底,
這個(gè)div就可以蓋住select了.
</pre>
</body></html>
相關(guān)文章
javascript模擬select實(shí)現(xiàn)代碼
記錄一個(gè)自己作的小作品,一個(gè)js模擬的select。2010-08-08js+css使文本框自動(dòng)適應(yīng)內(nèi)容的高度
使文本框自動(dòng)適應(yīng)內(nèi)容的高度的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-05-05google 搜索框添加關(guān)鍵字實(shí)現(xiàn)代碼
一段創(chuàng)新的搜索腳本代碼來自tourbus的Bob Rankin提供了一段定制的JAVA代碼.2010-04-04JavaScript 輸入框內(nèi)容格式驗(yàn)證代碼
當(dāng)鼠標(biāo)焦點(diǎn)移至密碼輸入框時(shí),利用js腳本自動(dòng)驗(yàn)證用戶名的格式正確與否2010-02-02仿51JOB的地區(qū)選擇效果(可選擇多個(gè)地區(qū))
以下是HTML網(wǎng)頁特效代碼,點(diǎn)擊運(yùn)行按鈕可查看效果2008-11-11javascript select列表內(nèi)容按字母倒序排序與按列表倒序排列
javascript select列表內(nèi)容按字母倒序排序與按列表倒序排列...2007-08-08