Solution to the problem of layer covering the drop-down list box_Experience exchange

IE6真的让人很郁闷。但是就目前而言，我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看，使用IE6的还是占有绝对主流的。

本来想顺便说说web标准中这个“标准”到底是个什么东西，但是发现，还是明日另起一篇吧。因为这个不是“顺便说说”就能说清楚的。我们今天还是不如这个正题——如何让层盖住下拉列表框？

非常郁闷或者非常幸运的说一下：这个问题只会出现IE7之前那些对web标准支持不好的浏览器中（例如现在非常主流的IE6 -_-b... ）,IE7和FF都不会出现这个问题。截图为证：

出现上面情况的参考代码：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html>
head>
title>Css Javascript Demotitle>
meta name="Generator" content="EditPlus"/>
meta name="Author" content="JustinYoung"/>
meta name="Keywords" content="CssStandard JavascriptDemo,B/S,JustinYoung"/>
meta name="Description" content="This demo from JustinYoung's Blog:Yes!B/S!"/>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
style type="text/css">
#divUp{
    z-index:99;
    position:absolute;
    background-color:red;
    width:100;
    height:18;
    overflow:hidden;
    height:60px;
}

#ddlTest{
    width:200;
    z-index:1;
}
style>
body>
div id="divUp">aaaaaaabr>bbbbbbbbr>cccccccdiv>
br/>
select id="ddlTest">option>test0option>test1option>test2option>test3select>
html>

For IE6, in fact, we are not without solutions. Although we have to admit that this method is very "frustrating", this is currently the most effective method. That is to add an iframe above the drop-down list, and then let the div layer float above the iframe, so that the div can "cover" the drop-down list. If you want to ask "why", then, first of all, congratulations, you are a good classmate, unlike many people who only look for solutions on the Internet instead of knowledge (for example, I-_-b...), and then I will tell You, there is no reason for this, this is the weird analysis of IE6. If you must ask why, I can only tell you that in IE6, if there are only div and select, no matter how your z-index is set, the div layer will always be trampled by the select tag, while the iframe can crawl to the select. Therefore, the following method can solve the problem because the iframe is above the select, and the div rides on the iframe and climbs to the select. It is a bit like this: A Pekingese dog (div ) usually gets stepped on and bullied by the big wolf dog (select). On this day, Jingba’s owner (iframe) hugged Jingba and stepped on the big wolf dog’s soles. At this time, Jingba was naturally on top of the big wolf dog.扯远了，给出解决方案代码：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html>
head>
title>Css Javascript Demotitle>
meta name="Generator" content="EditPlus"/>
meta name="Author" content="JustinYoung"/>
meta name="Keywords" content="CssStandard JavascriptDemo,B/S,JustinYoung"/>
meta name="Description" content="This demo from JustinYoung's Blog:Yes!B/S!"/>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
style type="text/css">
body{
    font-size:small;
}

#zindexDiv{
position:absolute;
z-index:50;
width:expression(this.nextSibling.offsetWidth);
height:expression(this.nextSibling.offsetHeight);
top:expression(this.nextSibling.offsetTop);
left:expression(this.nextSibling.offsetLeft);
/*background-color:green;在ff中将这句话放出来，你就会明白京叭、狼狗、主人的比喻*/
}

#divUp{
z-index:99;
position:absolute;
background-color:red;
width:100;
height:18;
overflow:hidden;
height:60px;
}

#ddlTest{
width:200;
z-index:1;
}
style>


body>
iframe id="zindexDiv" frameborder="0">iframe>
div id="divUp">aaaaaaabr>bbbbbbbbr>cccccccdiv>
br/>
select id="ddlTest">option>test0option>test1option>test2option>test3select>
html>

keyword:层 列表框,div和列表框,列表框盖住层,怎么让层盖住列表框,列表框和层,下列列表框,如何用层盖住下拉列表框