可编辑的下拉框 -

fp_moon

浏览: 987024 次
性别:
来自: 深圳

最近访客更多访客>>

kof98765

gxpcw

elashu

duwu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

可编辑的下拉框

html select z-index

可编辑下拉框：实际就是用一个<input type=text/>框遮挡在select的上面来实现的
但是在IE6下z-index属性失效没有达到正确的效果（IE6下select标签总在最顶层）
但是可以用iframe来遮挡select标签,实现思路：

1.用一个iframe标签遮挡在select标签之上（ z-index默认是0，所以iframe的该属性大于0即可）
2.再用一个<input type=text/>遮挡iframe标签就OK了

要让z-index起作用有几个小小前提：
1.就是元素的position属性要是relative，absolute或是fixed。
2.设置z-index的标签不能含有浮动属性
3.父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而

言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的

z-index谁高谁低，只看绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级

别的z-index层级（最顶层父标签的层级）
z-index属性解释详见：http://www.wufangbo.com/ie6-ie7-z-index-bug

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="No-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="-1" />
<style type="text/css">
.T_iframe   
{   
    position: absolute;
    width: 156px;    
    height: 20px;   
    z-index:1; 
    left:0;
    top:0;
    filter: alpha(opacity = 0);  
   -moz-opacity:0;            
    opacity: 0; 
}   
#SELECT_DDNSService
{   
    position: absolute;  
    width: 156px;    
    height: 16px;   
    z-index:10; 
    left:0;
    top:0;
}
</style>
</head>  
<body>
<div style="position:relative;margin:100px 100px;">    
 <span><select style="width:178px;"   onclick="this.parentNode.nextSibling.value=this.value;">
  <option id="idSelectDyn" value="dyndns.org">dyndns.org</option>
  <option id="idSelect3322" value="3322.org">3322.org</option>
  <option id="idSelectDtDNS" value="www.dtdns.com">www.dtdns.com</option>
  <option id="idSelectZone" value="oray.cn">oray.cn</option>
 </select></span><input  type="text" id="SELECT_DDNSService" />
 <iframe class="T_iframe" ></iframe>  
</div> 
</body>
</html>

分享到：