用層遮蓋select下拉菜單的實現方法發布者:本站 時間:2020-05-16 08:05:51
z-index是CSS中決定網頁中容器元素垂直顯示順序的屬性,比如兩個div,z-index值大的將遮蓋小的div.而select控件由于其瀏覽器開發實現方法和其他標簽不同,用常規方法div無法遮蓋,所以得借助其他的方法.
建立一個iframe,z-index屬性是5,將其隱藏,位置于需要遮蓋的select相同,比select大一點,剛好遮住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>
選擇我們,優質服務,不容錯過
1. 優秀的網絡資源,強大的網站優化技術,穩定的網站和速度保證
2. 15年上海網站建設經驗,優秀的技術和設計水平,更放心
3. 全程省心服務,不必擔心自己不懂網絡,更省心。
------------------------------------------------------------
24小時聯系電話:021-58370032