z-index css彈出框和ie7

我有一些div框，當懸停時應該顯示一個語音框。使用jQuery和CSS並不難。z-index css彈出框和ie7

但是，彈出式語音出現在IE7的鄰居div下 - 我無法讓它出現在它下面（請參閱鏡頭）。

我試圖在不同的地方玩Z指數沒有成功。

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

個

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

來源

2009-05-02 coulix

我認爲這是由於Internet Explorer中的z-index錯誤。定位元素（即具有position而不是static的元素）建立它們自己的堆棧上下文。

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

根據我的經驗，就好像所有的div.boardshot_list span.img_box有0的z索引，每個div.boardshot_list span.img_box中的元素有替代1和2的0.1，0.2一個z-index ES等。

您應該能夠通過設置含有可見彈出來1的span.img_box的z-index的，這樣來解決這個問題：

// 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時彈出消失。

來源

2009-05-03 03:31:42

這是因爲乘法類（.container_speech_box and .popup）在不同的瀏覽器風格的分辨率衝突的可能。嘗試將.popup div包裝在.container_speech_box中。

來源

2009-05-02 08:16:58 Thevs

z-index css彈出框和ie7

回答

相關問題