ie6 & 7 z-index problem

Question

У меня немного сложность с css-индексом z-index, т. Е. 6 & 7. У меня есть список «ящиков» с всплывающим div, появляющимся при переходе через поле « "(используя jquery), но в ie6 & 7 всплывающее окно появляется под полем ниже. Может ли кто-нибудь сказать мне, что я делаю неправильно и почему? Вот мой CSS:

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

Спасибо.

Answer 1

IE6 имел известную ошибку z-index. Есть обходные пути.

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Internet Explorer z-index bug?

Answer 2

z-index проблем в IE, как правило, могут быть решены путем возни с установкой position:relative (или position:absolute) на пораженный элемента и его родителей.

(Как правило, вы будете использовать position:relative, если вы на самом деле хотите поместить вещи абсолютно, вы уже определили его)

Это довольно хорошо известная проблема; есть много сайтов с подробностями о том, как обойти это.