用層遮蓋select下拉菜單的實(shí)現(xiàn)方法發(fā)布者：本站 時(shí)間：2020-05-16 08:05:51
z-index是CSS中決定網(wǎng)頁中容器元素垂直顯示順序的屬性，比如兩個(gè)div，z-index值大的將遮蓋小的div．而select控件由于其瀏覽器開發(fā)實(shí)現(xiàn)方法和其他標(biāo)簽不同，用常規(guī)方法div無法遮蓋，所以得借助其他的方法．
建立一個(gè)iframe，z-index屬性是5，將其隱藏，位置于需要遮蓋的select相同，比select大一點(diǎn)，剛好遮住select
select的z-index屬性是4
div的是z-index屬性是6
總之，z-index屬性，select的要比IFrame的小,div的要比IFrame的大，這樣層就可以遮住select．
divselect.HTML代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<DIV id=div1 name=div1 style="width:400;height:400;background-color:lightblue;
position:absolute;left:350;top:250;z-index:6">DIV</DIV>
<select id=select1 name=select1 style="position:absolute;left:400;top:400;width=300;z-index:4"
size=1 >
<option>Option1
<option>Option2
<option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src=http://www.webyi.com/wschool/wdesign/html/20090226/"" scroll="none" style="dispaly:none;width:200;height:415;position:absolute;
left:400;top:300;z-index:5;filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'"></iframe>
</BODY>
</HTML>
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032