可编辑的下拉框

最新推荐文章于 2021-06-17 10:18:51 发布

iteye_582

最新推荐文章于 2021-06-17 10:18:51 发布

阅读量122

点赞数

文章标签： html select z-index

本文链接：https://blog.csdn.net/iteye_582/article/details/82199272

版权

可编辑下拉框：实际就是用一个<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;"   οnclick="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>

iteye_582

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可编辑的下拉框

可编辑下拉框：实际就是用一个&lt;input type=text/&gt;框遮挡在select的上面来实现的但是在IE6下z-index属性失效没有达到正确的效果（IE6下select标签总在最顶层）但是可以用iframe来遮挡select标签,实现思路：1.用一个iframe标签遮挡在select标签之上（ z-index默认是0，所以iframe的该属性大于0即可）2.再用一个&lt;...
复制链接

扫一扫