IE6和7的z-index问题

我有在IE 6 & 7.有点用CSS Z-index属性困难，当你将鼠标悬停在“框我已经有了一个“盒子”与一个弹出的div出现一个列表“（使用jquery），但在ie6 & 7弹出窗口出现在下面的框中。有人能告诉我我做错了什么，为什么？这里是我的CSS：IE6和7的z-index问题

#trainingModules 
     { 
      width: 250px; 
      height: auto; 
      padding: 0; 
      margin: 0;  
      font-family: Arial; 
     } 

     #trainingModules li 
     { 
      list-style: none; 
      float: left; 
      position: relative; 
      width: 200px; 
      height: 180px; 
      margin: 5px 15px 10px 15px; 
      cursor: pointer; 
     } 
     #trainingModules li .mod 
     { 
      width: 100%; 
      height: 100%; 
      z-index: 0; 
     } 
     #trainingModules .modTitle { width: 100%; height: 32px;} 
     #trainingModules .modBody 
     { 
      border: 4px solid #e5e5e5; 
      width: 192px; 
      height: 132px; 
      position:relative; 
     } 
     #trainingModules .mod .modBody .bestScore 
     { 
      font-size: 20px; 
      color: red; 
      position: absolute; 
      top: 5px; 
      left: 5px; 
     } 
     #trainingModules .mod .modBody .bestScore span { 
      font-size: 10px; 
      line-height:20px; 
      vertical-align: top; 
     } 
     #trainingModules .modBody .moduleDescription 
     { 
      position:absolute; 
      top: 132px; 
      left: -4px; 
      color:White; 
      background-color: Black; 
      z-index: 100; 
      width: 190px; 
      padding: 5px; 
     }

我的jQuery：

$(document).ready(function() { 
     $('#trainingModules li').hover(function() { 
       $(this).find('.moduleDescription').show(); 
      }, 
      function() { 
       $(this).find('.moduleDescription').hide(); 
      }); 
    });

我的HTML：

<ul id="trainingModules"> 

    <li> 
     <div class="mod"> 
      <div class="modTitle"> 
       <div class="stateIcon"></div> 
       <a class="moduleLaunchLink" href="somelink">Some Name</a> 
      </div> 
      <div class="modBody"> 
       <div class="bestScore">93<span>%</span></div> 
       <div class="moduleDescription" style="display:none;"> 
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
        blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah 
       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="mod"> 
      <div class="modTitle"> 
       <div class="stateIcon"></div> 
       <a class="moduleLaunchLink" href="somelink">Some Name</a> 
      </div> 
      <div class="modBody"> 
       <div class="bestScore">93<span>%</span></div> 
       <div class="moduleDescription" style="display:none;"> 
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
        blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah 
       </div> 
      </div> 
     </div> 
    </li> 

</ul>

感谢。

来源

2011-03-15 Matt27

在IE浏览器总是与'z-index的开始：1;'因为它与0 – Kyle 2011-03-15 10:08:37

问题，如果你仍然无法弄清楚通过使用已经给出了很好的建议，你需要发布链接到您的网站。我在盘算这个bug了[好]（http://stackoverflow.com/questions/5306412/sub-nav-doesnt-appear-over-the-image-in-ie7/5306445#5306445）。 – thirtydot 2011-03-15 10:15:19

有趣的是，我不知道。我在哪里得到了z-index：0我用z-index：1替换了它，但它仍然无效。 – Matt27 2011-03-15 10:15:59