ie6＆7 z-index问题

Question

I'm having a bit of difficulty with css z-index property in ie 6 & 7. I've got a list of "boxes" with a popup div appearing when you roll over the "box" (using jquery) but in ie6 & 7 the popup appears under the box below. Could someone tell me what I'm doing wrong and why? Here's my 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;
        }

My jQuery:

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

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

Thanks.

Answer 1

IE6 had a known z-index bug. There are workarounds.

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

Internet Explorer z-index bug?

Answer 2

IE's z-index issues can usually be resolved by messing around with setting position:relative (or position:absolute ) on the affected element and its parents.

(Generally you'd use position:relative ; if you actually want to position stuff absolutely, you'd already have specified it)

It's a fairly well known issue; there's lots of sites with details of how to work around it.