Question

我对css z-index属性有一点困难，即6＆amp; 7.当你滚动“盒子”（使用jquery）时，我有一个带有弹出窗口的“盒子”列表但是在ie6＆amp; 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

IE的z-index问题通常可以通过在受影响的元素及其父元素上设置position:relative（或position:absolute）来解决。

（通常你会使用position:relative;如果你真的想要绝对定位东西，你已经指定了它）

这是一个众所周知的问题;有很多网站都有关于如何解决它的细节。

ie6＆amp; 7 z-index问题

2 个答案: