z索引css弹出框和ie7

我有一些div框，悬停时会显示一个语音框。有了jQuery和CSS，就不难了

但是，在IE7中，弹出语音显示在邻居div下-我无法使其显示在其下（参见快照）

我试着在不同的位置玩z-index，但没有成功

FF IE7

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>

JS

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;
}

 <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
         }, time, 'swing', function () {
           shown = false;
           popup.css('display', 'none');
         });
       }, hideDelay);
     });
   });
});


    </script>

$（文档）.ready（函数（）{
$（'.img_框'）。每个（函数（）{
//选择权
var距离=10；
var时间=250；
var hideDelay=50；
var hideDelayTimer=null；
//跟踪器
var BeingShowed=假；
显示的var=假；
var trigger=$（'.trigger'，this）；
var popup=$（'.popup'，this）.css（'opacity'，0）；
//在两个元素上设置mouseover和mouseout
$（[trigger.get（0），popup.get（0）]）.mouseover（函数（）{
//如果从触发器移动到弹出元素，则停止隐藏事件
if（hideDelayTimer）clearTimeout（hideDelayTimer）；
//如果我们正在显示或已经可见，请不要再次触发动画
如果（显示| |显示）{
返回；
}否则{
被显示=真实；
//弹出框的复位位置
popup.css({
前-10名，
左:20,，
display:'block'//将弹出窗口重新显示
})
//（我们在弹出窗口上使用链接）现在设置其不透明度和位置的动画
.制作动画({
顶部：'-='+距离+px'，
不透明度：0.9
}，时间，'swing'，函数（）{
//动画完成后，设置跟踪器变量
显示为假；
显示=正确；
});
}
}).mouseout（函数（）{
//如果我们再次被解雇，请重置计时器-避免双重动画
if（hideDelayTimer）clearTimeout（hideDelayTimer）；
//储存计时器，以便在需要时在鼠标上方清除
hideDelayTimer=setTimeout（函数（）{
hideDelayTimer=null；
动画({
不透明度：0
}，时间，'swing'，函数（）{
显示=假；
css（'display'，'none'）；
});
}，hideDelay）；
});
});
});

这可能是由于不同浏览器中的多类（

.container\u speech\u box和.popup

）样式解析冲突造成的。尝试将.popup div环绕在.container\u speech\u框中。

我认为这是由于Internet Explorer中的

z-index

错误造成的。定位元素（即具有

位置

而非

静态

的元素）建立其自己的堆叠上下文

根据我的经验，就好像你所有的

div.boardshot\u列表span.img\u框

都有一个z索引

0

，每个

div.boardshot\u列表span.img\u框

中的元素都有一个

z索引
es，而不是
1
和
2

您应该能够通过设置
span.img_框
的z索引来解决此问题，该框包含一个可见的弹出窗口
1
，如下所示：

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

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

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