ie6/7 层级出现问题 下拉框被遮住


<!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" />
<title>无标题文档</title>
<style type="text/css">
.zt{
float:left;
width:280px;
}
*{
margin:0;
padding:0;
}
body li dl dt{
margin:0;
padding:0;
}
img {
border:0;
}
body{
font-size: 12px;
    color: #000;
font-family: Arial, Helvetica, sans-serif;
}
li{ 
   list-style:none;
}
.fl{
float:left;
display:inline;
}
.fr{
float:right;
display:inline;
}
a{ 
   text-decoration:none;
   color:#000;
}
a:hover{ 
   text-decoration:none;
}
.search{
position:absolute;
top:0;
left:50%;
margin-left:-487px;
}
.search_wei_left{
width:280px;
height:360px;
float:left;
position:relative;
}
.search_wei_left .search_head{
width:280px;
float:left;
}
.search_wei_left .search_head li{
width:140px;
    height:40px;
    float:left;
    background:#6F828A;
    color:#FFF;
    font-size:18px;
font-weight:bold;
    line-height:40px;
    text-align:center;
    cursor:pointer;
}
.search_wei_left .search_head .active{
background:#FFF;
    filter:alpha(opacity:60);
    opacity:0.6;
    color:#00BCF3;
}
.search_wei_left .search_con{
width:280px;
    height:320px;
    float:left;
    background:#099;
display:block;
}
.search_xianshi{
position:absolute;
top:40px;
left:0;
width:280px;
height:320px;
}
.search_input1{
width:240px;
height:35px;
float:left;
border:1px solid #BFBFBF;
margin:20px 20px;
display:inline;
background:#FFF;
}
.search_input1_left{
width:218px;
height:35px;
float:left;
position:relative;
}
.search_input1_left .input1{
width:218px;
height:15px;
padding:10px 0;
border:0;
font-size:13px;
line-height:20px;
float:left;
outline:none;
color:#7D7D7D;
}
.search_input1_right{
width:22px;
height:35px;
float:right;
cursor:pointer;
}
.search_xiala1_zhen{
width:240px;
border:1px solid #B5B5B5;
float:left;
z-index:9999;
position:absolute;
left:-1px;
top:37px;
background:#FFF;
z-index:999;
}
.search_xiala1_zhen .close{
width:14px;
height:14px;
position:absolute;
top:5px;
right:10px;
cursor:pointer;
}
.search_xiala1_zhen .zhen_head{
width:238px;
height:30px;
line-height:27px;
text-indent:20px;
font-size:15px;
}
.search_xiala1_zhen .zhen_head a{
padding-left:20px;
}
.search_xiala1_zhen .content{
width:220px;
margin-left:11px;
}
.search_xiala1_zhen .content li{
width:110px;
line-height:30px;
float:left;
}
.search_xiala1_zhen .content li a{
padding-left:20px;
color:#626262;
width:90px;
height:30px;
line-height:30px;
display:block;
border-bottom:1px solid #DCDCDC;
}
.search_xiala1_zhen .content li a:hover{
color:#00BCF3;
text-decoration:underline;
}
/*人数*/
.search_ren{
width:240px;
height:35px;
float:left;
margin:40px 20px;
display:inline;
}
.search_ren_rens{
width:115px;
height:22px;
float:left;
background:#FFF;
border:1px solid #BFBFBF;
}
.search_ren_rens .left{
width:92px;
height:22px;
float:left;
line-height:22px;
position:relative;
}
.search_ren_rens .left .input{
width:92px;
height:22px;
float:left;
    border:0;
line-height:22px;
font-size:12px;
color:#7D7D7D;
outline:none;
}
.search_ren_rens .right{
width:21px;
height:22px;
float:right;
border-left:1px solid #BFBFBF;
}
.search_ren_rens_xiala{
width:70px;
border:1px solid #B5B5B5;
background:#FFF;
position:absolute;
left:0;
top:25px;
z-index:99999;
}
.search_ren_rens_xiala a{
width:70px;
height:28px;
display:inline-block;
line-height:28px;
font-size:15px;
cursor:pointer;
border-bottom:1px dashed #E5E5E5;
color:#626262;
}
.search_ren_rens_xiala a:hover{
background:#00B6F2;
color:#FFF;
}
.showbox{
height:260px;
width:119px;
position:relative;
overflow:hidden;
float:left;
margin:10px 1px;
display:inline;
}
.showbox .subtitle{
position:absolute;
left:0;
bottom:-230px;
height:260px;
width:120px;
background:#00BCF3;
opacity:0.7;
filter:alpha(opacity=70);
color:#fff;
font-size:12px;
}
.showbox .subtitle span{
color:#FFF;
width:120px;
height:25px;
line-height:25px;
float:left;
text-align:center;
}
.showbox .subtitle span a{
color:#FFF;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
window.onload=function()
{
zhen();
daren();
}
</script>
</head><body>
<div class="zt">
<div class="search_wei_left">
   <div class="search_head">
    <ul>
     <li class="active">普通订房</li>
     <li>家庭订房</li>
    </ul>
   </div>
   <div class="search_con"></div>
   <div style="clear:both;overflow:hidden;height:0;"></div>
   <div class="search_xianshi">
     <div class="search_con1" style="display:block;">
      <form>
         <div class="search_input1">
           <div class="search_input1_left">
            <input type="text" class="input1" value="输入或者选择小镇名称和目的地"/>
            <div id="zhen" class="search_xiala1_zhen" style="display:none;" name="sy_xiand">
            <div id="close" class="close">
        <img src="images/Button_Hotcity_Close.gif" />
      </div>
            <div class="zhen_head">
              可直接输入小镇的名称
            </div>
           <div class="content">
          <ul>
            <li>
              <a href="">龙海风情小镇</a>
              <a href="">林旺南风天小镇</a>                      
              <a href="">龙海风情小镇</a>
              <a href="">林旺南风小镇</a>
              <a href="">林旺南风小镇</a>
            </li>
            <li>
              <a href="">龙海风情小镇</a>
              <a href="">林旺南风天小镇</a>
              <a href="">林旺南风小镇</a>
              <a href="">龙海风情小镇</a>
              <a href="">林旺南风小镇</a>
            </li>
          </ul>
        </div>
        </div>
       </div>
        <div class="search_input1_right"></div>
         </div>
         <div class="search_ren">
           <div class="search_ren_rens">
           <div class="left">
           <input class="input" autocomplete="off" style="outline:none;" type="text" value="人数" />         
           <div id="rens" class="search_ren_rens_xiala" style="display:none;" name="sy_xiand">
           <ul>
             <li class="active"><a href="">不限</a></li>
             <li><a href="">1</a></li>
             <li><a href="">2</a></li>
             <li><a href="">3</a></li>
             <li><a href="">4</a></li>
             <li><a href="">5</a></li>
             <li><a href="">6</a></li>
             <li><a href="">7+</a></li>
           </ul>
         </div>
         </div>
         <div class="right"></div>
         </div>
           
         </div>
   
       </form>
     </div>
   </div>
  </div>
  <div class="showbox">
     <a href=""><img width="120" height="260" src="http://wenwen.soso.com/p/20100315/20100315063953-747992335.jpg"/></a>
      <div class="subtitle">
        <span>龙海风情小镇</span>
        <span>1544个旅店</span>
        <span>2122个旅游攻略</span>
        <span>2122个商户</span>
        <span style="padding-top:30px;">特色：靠海听风</span>
        <span style="margin-top:74px;background:#00BCF3;">
         <a href="" class="fl" style="margin-left:10px;">订房间</a>
         <a href="" class="fr" style="margin-right:10px;">小镇介绍</a>
        </span>
      </div>
    </div>
   </div>
  <script type="text/javascript">
   function zhen()
{
    var oDiv=document.getElementById('zhen');
   var input=document.getElementsByTagName('input');
   var a=oDiv.getElementsByTagName('a');
    var close1=document.getElementById('close');

close1.onclick=function()
{
oDiv.style.display="none";
}
   input[0].onclick=function(ev)
   {

   var oev=ev||event;
   if(oDiv.style.display=="none")
   {
        oDiv.style.display="block";
   for(var i=0;i<a.length;i++)
   {
   a[i].onclick=function()
   {
          input[0].value=this.innerHTML;
          oDiv.style.display="none";
          return false;
   }
   }
   }
   else
   {
   oDiv.style.display="none";
   }
   oev.cancelBubble=true;
   }
}function daren()
{
   var oDiv2=document.getElementById('rens');
   var input=document.getElementsByTagName('input');
   var a2=oDiv2.getElementsByTagName('a');   input[1].onclick=function(ev)
   {

   var oev=ev||event;
   if(oDiv2.style.display=="none")
   {
        oDiv2.style.display="block";
   for(var i=0;i<a2.length;i++)
   {
   a2[i].onclick=function()
   {
          input[1].value=this.innerHTML;
          oDiv2.style.display="none";
          return false;
   }
   }
   }
   else
   {
   oDiv2.style.display="none";
   }
   oev.cancelBubble=true;
   }
  
}  </script>
  <script type="text/javascript">
$(".showbox").each(function(){
var self = $(this), delay;
self.mouseover(function(){
delay = setTimeout(function(){ delay = null; self.find(".subtitle").stop().animate({"bottom":0}, 300);},300);
}).mouseout(function(){
if(delay){
clearTimeout(delay);
}else{
setTimeout(function(){self.find(".subtitle").stop().animate({"bottom":-230}, 300);},300);
}
});
});
</script>
</body>
</html>
麻烦大家找找问题   

解决方案 »

  1.   

    弹出层的下面再加上一层 iframe
      

  2.   

    <!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" />
    <title>无标题文档</title>
    <style type="text/css">
    .zt{
    float:left;
    width:280px;
    }
    *{
    margin:0;
    padding:0;
    }
    body li dl dt{
    margin:0;
    padding:0;
    }
    img {
    border:0;
    }
    body{
    font-size: 12px;
        color: #000;
    font-family: Arial, Helvetica, sans-serif;
    }
    li{ 
       list-style:none;
    }
    .fl{
    float:left;
    display:inline;
    }
    .fr{
    float:right;
    display:inline;
    }
    a{ 
       text-decoration:none;
       color:#000;
    }
    a:hover{ 
       text-decoration:none;
    }
    .search{
    position:absolute;
    top:0;
    left:50%;
    margin-left:-487px;
    }
    .search_wei_left{
    width:280px;
    height:360px;
    float:left;
    position:relative;
    }
    .search_wei_left .search_head{
    width:280px;
    float:left;
    }
    .search_wei_left .search_head li{
    width:140px;
        height:40px;
        float:left;
        background:#6F828A;
        color:#FFF;
        font-size:18px;
    font-weight:bold;
        line-height:40px;
        text-align:center;
        cursor:pointer;
    }
    .search_wei_left .search_head .active{
    background:#FFF;
        filter:alpha(opacity:60);
        opacity:0.6;
        color:#00BCF3;
    }
    .search_wei_left .search_con{
    width:280px;
        height:320px;
        float:left;
        background:#099;
    display:block;
    }
    .search_xianshi{
    position:absolute;
    top:40px;
    left:0;
    width:280px;
    height:320px;
    }
    .search_input1{
    width:240px;
    height:35px;
    float:left;
    border:1px solid #BFBFBF;
    margin:20px 20px;
    display:inline;
    background:#FFF;
    }
    .search_input1_left{
    width:218px;
    height:35px;
    float:left;
    /*  position:relative;   */
    }
    .search_input1_left .input1{
    width:218px;
    height:15px;
    padding:10px 0;
    border:0;
    font-size:13px;
    line-height:20px;
    float:left;
    outline:none;
    color:#7D7D7D;
    }
    .search_input1_right{
    width:22px;
    height:35px;
    float:right;
    cursor:pointer;
    }
    .search_xiala1_zhen{
    width:240px;
    border:1px solid #B5B5B5;
    float:left;
    z-index:9999;
    position:absolute;
    left:-1px;
    top:37px;
    background:#FFF;
    z-index:999;
    }
    .search_xiala1_zhen_ifr{
    width:240px;
    border:none;
     
    position:absolute;
    left:-1px;
    top:37px;
    background:#FFF;
    z-index:999;
    display:none;
    }


    .search_xiala1_zhen .close{
    width:14px;
    height:14px;
    position:absolute;
    top:5px;
    right:10px;
    cursor:pointer;
    }
    .search_xiala1_zhen .zhen_head{
    width:238px;
    height:30px;
    line-height:27px;
    text-indent:20px;
    font-size:15px;
    }
    .search_xiala1_zhen .zhen_head a{
    padding-left:20px;
    }
    .search_xiala1_zhen .content{
    width:220px;
    margin-left:11px;
    }
    .search_xiala1_zhen .content li{
    width:110px;
    line-height:30px;
    float:left;
    }
    .search_xiala1_zhen .content li a{
    padding-left:20px;
    color:#626262;
    width:90px;
    height:30px;
    line-height:30px;
    display:block;
    border-bottom:1px solid #DCDCDC;
    }
    .search_xiala1_zhen .content li a:hover{
    color:#00BCF3;
    text-decoration:underline;
    }
    /*人数*/
    .search_ren{
    width:240px;
    height:35px;
    float:left;
    margin:40px 20px;
    display:inline;
    }
    .search_ren_rens{
    width:115px;
    height:22px;
    float:left;
    background:#FFF;
    border:1px solid #BFBFBF;
    }
    .search_ren_rens .left{
    width:92px;
    height:22px;
    float:left;
    line-height:22px;
    position:relative;
    }
    .search_ren_rens .left .input{
    width:92px;
    height:22px;
    float:left;
        border:0;
    line-height:22px;
    font-size:12px;
    color:#7D7D7D;
    outline:none;
    }
    .search_ren_rens .right{
    width:21px;
    height:22px;
    float:right;
    border-left:1px solid #BFBFBF;
    }
    .search_ren_rens_xiala{
    width:70px;
    border:1px solid #B5B5B5;
    background:#FFF;
    position:absolute;
    left:0;
    top:25px;
    z-index:99999;
    }
    .search_ren_rens_xiala a{
    width:70px;
    height:28px;
    display:inline-block;
    line-height:28px;
    font-size:15px;
    cursor:pointer;
    border-bottom:1px dashed #E5E5E5;
    color:#626262;
    }
    .search_ren_rens_xiala a:hover{
    background:#00B6F2;
    color:#FFF;
    }
    .showbox{
    height:260px;
    width:119px;
    position:relative;
    overflow:hidden;
    float:left;
    margin:10px 1px;
    display:inline;
    }
    .showbox .subtitle{
    position:absolute;
    left:0;
    bottom:-230px;
    height:260px;
    width:120px;
    background:#00BCF3;
    opacity:0.7;
    filter:alpha(opacity=70);
    color:#fff;
    font-size:12px;
    }
    .showbox .subtitle span{
    color:#FFF;
    width:120px;
    height:25px;
    line-height:25px;
    float:left;
    text-align:center;
    }
    .showbox .subtitle span a{
    color:#FFF;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    window.onload=function()
    {
    zhen();
    daren();
    }
    </script>
    </head><body>
    <div class="zt">
    <div class="search_wei_left">
       <div class="search_head">
        <ul>
         <li class="active">普通订房</li>
         <li>家庭订房</li>
        </ul>
       </div>
       <div class="search_con"></div>
       <div style="clear:both;overflow:hidden;height:0;"></div>
       <div class="search_xianshi">
         <div class="search_con1" style="display:block;">
          <form>
             <div class="search_input1">
               <div class="search_input1_left">
                <input type="text" class="input1" value="输入或者选择小镇名称和目的地"/>
                
               <iframe  class="search_xiala1_zhen_ifr" ></iframe>
               <div id="zhen" class="search_xiala1_zhen" style="display:none;" name="sy_xiand">
                <div id="close" class="close">
            <img src="images/Button_Hotcity_Close.gif" />
          </div>
                <div class="zhen_head">
                  可直接输入小镇的名称
                </div>
               <div class="content">
              <ul>
                <li>
                  <a href="">龙海风情小镇</a>
                  <a href="">林旺南风天小镇</a>                      
                  <a href="">龙海风情小镇</a>
                  <a href="">林旺南风小镇</a>
                  <a href="">林旺南风小镇</a>
                </li>
                <li>
                  <a href="">龙海风情小镇</a>
                  <a href="">林旺南风天小镇</a>
                  <a href="">林旺南风小镇</a>
                  <a href="">龙海风情小镇</a>
                  <a href="">林旺南风小镇</a>
                </li>
              </ul>
            </div>
            </div>
           </div>
            <div class="search_input1_right"></div>
             </div>
             <div class="search_ren">
               <div class="search_ren_rens">
               <div class="left">
               <input class="input" autocomplete="off" style="outline:none;" type="text" value="人数" />         
               <div id="rens" class="search_ren_rens_xiala" style="display:none;" name="sy_xiand">
               <ul>
                 <li class="active"><a href="">不限</a></li>
                 <li><a href="">1</a></li>
                 <li><a href="">2</a></li>
                 <li><a href="">3</a></li>
                 <li><a href="">4</a></li>
                 <li><a href="">5</a></li>
                 <li><a href="">6</a></li>
                 <li><a href="">7+</a></li>
               </ul>
             </div>
             </div>
             <div class="right"></div>
             </div>
               
             </div>
       
           </form>
         </div>
       </div>
      </div>
      <div class="showbox">
         <a href=""><img width="120" height="260" src="http://wenwen.soso.com/p/20100315/20100315063953-747992335.jpg"/></a>
          <div class="subtitle">
            <span>龙海风情小镇</span>
            <span>1544个旅店</span>
            <span>2122个旅游攻略</span>
            <span>2122个商户</span>
            <span style="padding-top:30px;">特色：靠海听风</span>
            <span style="margin-top:74px;background:#00BCF3;">
             <a href="" class="fl" style="margin-left:10px;">订房间</a>
             <a href="" class="fr" style="margin-right:10px;">小镇介绍</a>
            </span>
          </div>
        </div>
       </div>
      <script type="text/javascript">
       function zhen()
    {
        var oDiv=document.getElementById('zhen');
       var input=document.getElementsByTagName('input');
       var a=oDiv.getElementsByTagName('a');
        var close1=document.getElementById('close');

    close1.onclick=function()
    {
    oDiv.style.display="none";
    $('.search_xiala1_zhen_ifr').hide();
    }
       input[0].onclick=function(ev)
       {

       var oev=ev||event;
       if(oDiv.style.display=="none")
       {
            oDiv.style.display="block";
            var p=$( input[0]).offset();
     
           // p.top+=input[0].offsetHeight;
            $(oDiv).css(p)
            $('.search_xiala1_zhen_ifr').show();
            p.height=oDiv.offsetHeight;
            $('.search_xiala1_zhen_ifr').css(p )
       for(var i=0;i<a.length;i++)
       {
       a[i].onclick=function()
       {
              input[0].value=this.innerHTML;
              oDiv.style.display="none";
              $('.search_xiala1_zhen_ifr').hide();
              return false;
       }
       }
       }
       else
       {
       oDiv.style.display="none";
       $('.search_xiala1_zhen_ifr').hide();
       }
       oev.cancelBubble=true;
       }
    }function daren()
    {
       var oDiv2=document.getElementById('rens');
       var input=document.getElementsByTagName('input');
       var a2=oDiv2.getElementsByTagName('a');   input[1].onclick=function(ev)
       {

       var oev=ev||event;
       if(oDiv2.style.display=="none")
       {
            oDiv2.style.display="block";
       for(var i=0;i<a2.length;i++)
       {
       a2[i].onclick=function()
       {
              input[1].value=this.innerHTML;
              oDiv2.style.display="none";
              return false;
       }
       }
       }
       else
       {
       oDiv2.style.display="none";
       }
       oev.cancelBubble=true;
       }
      
    }  </script>
      <script type="text/javascript">
    $(".showbox").each(function(){
    var self = $(this), delay;
    self.mouseover(function(){
    delay = setTimeout(function(){ delay = null; self.find(".subtitle").stop().animate({"bottom":0}, 300);},300);
    }).mouseout(function(){
    if(delay){
    clearTimeout(delay);
    }else{
    setTimeout(function(){self.find(".subtitle").stop().animate({"bottom":-230}, 300);},300);
    }
    });
    });
    </script>
    </body>
    </html>