z-index css弹出框和ie7

我有一些div框,在悬停时应该显示一个语音框.使用jQuery和CSS,这不是什么难事.

但是,弹出语音出现在IE7中的邻居div下 – 我不能让它出现在它下面(见镜头).

我尝试在不同的地方玩z-index但没有成功.

FF
alt text http://img134.imageshack.us/img134/5314/63386894.png
IE7
alt text http://img396.imageshack.us/img396/9329/95483890.png

HTML

<div class="boardshot_list">
    {% for ... %}

    <span class="img_Box">
        <a  href="/site_media/xxx" target="_blank">
            <img class="trigger" src="xxx" alt="{{ item.title }}" />
        </a>

  <div class="container_speech_Box popup">
   <div class="two">
    <b class="tl"><b class="tr"></b></b>
     <p>
     blabla
     </p>
    <b class="bl"></b><b class="br"><b class="point"></b></b>
   </div>
  </div>

 </span>


    {% endfor %}

    </div>

CSS

div.boardshot_list span.img_Box {
 display:block;
 width:220px;
 height:180px;
 float: left;
 margin: 0 10px 10px 0;
 position: relative;
}
img.trigger{
 border:1px solid #373743;
}
div.popup
{
    display: none; 
    position: absolute; 
 z-index: 50;
}

/* POPUP rounded Box */
.container_speech_Box div:after {content: "."; display: block; height:11px; clear:both; visibility:hidden;}
.container_speech_Box div {width:300px; height:auto; font-family:verdana; font-size:11px;}
b.tl {display:block; width:300px; height:8px; font-size:1px;}
b.tr {display:block; width:292px; height:8px; font-size:1px; float:right;}
b.bl {display:block; width:8px; height:8px; font-size:1px; float:left;}
b.br {display:block; width:292px; height:8px; font-size:1px; float:right; position:relative;}
b.point {display:block; font-size:1px; width:25px; height:14px;}
.container_speech_Box div p {padding:8px; margin:0; border:3px solid #4f5b69; border-width:0 3px; text-align:justify;}




div.two b.tl {background:url(/site_media/images/top_left2.gif) top left no-repeat;}
div.two b.tr {background:url(/site_media/images/top_right2.gif) top right no-repeat;}
div.two p {background:#fff;}
div.two b.bl {background:url(/site_media/images/bottom_left2.gif) top left no-repeat;}
div.two b.br {background:url(/site_media/images/bottom_right2.gif) top right no-repeat;}
div.two b.point {background:url(/site_media/images/point2.gif) top left no-repeat; margin:5px 0 0 125px;}


/* end popup table */

div.boardshot_list {
 width: 700px;
 clear: left;
 min-height: 80px;

}
div.boardshot_list .memo_id {
 padding-left: 10px;
 position: relative;
 float:right;
 color:#60564d;
 font-size: 25px;
 padding-top: 20px;
 width: 50px;
 top: 30px;
 left: 10px;
 font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
}

div.boardshot_list.even {
 background-color: #f3f5f6;

}

div.boardshot_list .title span{
 color: #bbb;
 font-weight: normal;
}

div.boardshot_list .img img {
 border:1px solid #373743;
}

JS

<script type="text/javascript">
    $(document).ready(function(){

 $('.img_Box').each(function () {
     // options
     var distance = 10;
     var time = 250;
     var hideDelay = 50;
     var hideDelayTimer = null;

     // tracker
     var beingShown = false;
     var shown = false;

     var trigger = $('.trigger',this);
     var popup = $('.popup',this).css('opacity',0);

     // set the mouSEOver and mouSEOut on both element
     $([trigger.get(0),popup.get(0)]).mouSEOver(function () {
       // stops the hide event if we move from the trigger to the popup element
       if (hideDelayTimer) clearTimeout(hideDelayTimer);

       // don't trigger the animation again if we're being shown,or already visible
       if (beingShown || shown) {
         return;
       } else {
         beingShown = true;
         // reset position of popup Box
         popup.css({
           top: -10,left: 20,display: 'block' // brings the popup back in to view
         })

         // (we're using chaining on the popup) Now animate it's opacity and position
         .animate({
           top: '-=' + distance + 'px',opacity: 0.9
         },time,'swing',function() {
           // once the animation is complete,set the tracker variables
           beingShown = false;
           shown = true;
         });
       }
     }).mouSEOut(function () {
       // reset the timer if we get fired again - avoids double animations
       if (hideDelayTimer) clearTimeout(hideDelayTimer);

       // store the timer so that it can be cleared in the mouSEOver if required
       hideDelayTimer = setTimeout(function () {
         hideDelayTimer = null;
         popup.animate({

           opacity: 0
         },function () {
           shown = false;
           popup.css('display','none');
         });
       },hideDelay);
     });
   });
});


    </script>

解决方法

我认为这是由于Internet Explorer中的z-index错误.定位元素(即具有静态位置的元素)建立它们自己的堆叠上下文.

http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

根据我的经验,就好像所有div.boardshot_list span.img_Box的z-index为0,每个div.boardshot_list中的元素span.img_Box的z-index为0.1,0.2等等,而不是1和2.

您应该能够通过将包含可见弹出窗口的span.img_Box的z-index设置为1来解决此问题,如下所示：

// reset position of popup Box
popup.css({
    top: -10,display: 'block' // brings the popup back in to view
})

$(this).css('z-index','1');

当弹出窗口消失时,不要忘记将其重置为0.