Question

我需要帮助找出ie7的z-index问题的解决方案。在Firefox中运行良好。

我已阅读其他帖子，但由于某些原因，对他们有效的建议对我不起作用。我希望有人可以查看我的代码，并指出问题所在。

见下图。请原谅模糊...客户不希望显示信息。

顶部（灰色）是一个“div”，里面有2个ul，一个用于子弹文本，一个用于图像缩略图。底部与顶部相同，只有白色。

在顶部我有3张图片，当“悬停”时，鼠标显示更大的图像。如您所见，较大的图像位于下一部分（白色）图像的后面，它应位于其上方。

我假设问题出在jquery z-index的某处，但我真的不知道。

我该如何解决这个问题？谢谢你的帮助。

alt text

HTML：

<body>
<div style="position:relative;width:1000px;">
<!-- Main Content -->
    <h2 class="h2_pad_me">Feature Details</h2>

    <div class="light pad_me">
        <h3>asdf</h3>
        <p>asdf</p> 
        <ul>
            <li>asdf</li>
            <li>asdf</li>
            <li>asdf</li>
        </ul>
        <h4>asdf:</h4>
        <div>
            <ul class="thumb_standard">
                <li><img src="asdf.jpg" alt="asdf"/></li>
                <li><img src="asdf.jpg" alt="asdf"/></li>
                <li><img src="asdf.jpg" alt="asdf"/></li>
            </ul>
        </div>
        <div class="clear_both"></div>
    </div>

    <div class="light pad_me">
        <h3>asdf</h3>
        <p>asdf</p> 
        <ul>
            <li>asdf</li>
            <li>asdf</li>
            <li>asdf</li>
        </ul>
        <h4>asdf:</h4>
        <div>
            <ul class="thumb_standard">
                <li><img src="asdf.jpg" alt="asdf"/></li>
                <li><img src="asdf.jpg" alt="asdf"/></li>
                <li><img src="asdf.jpg" alt="asdf"/></li>
            </ul>
        </div>
        <div class="clear_both"></div>
    </div>
</div>                      

</body>

CSS：

<style>
ul.thumb_standard {
    /*float: left;*/
    list-style: none;
    margin: auto; 
    padding: 10px;
    width: 900px;
    position:relative;
}
ul.thumb_standard li {
    margin: 0;
    padding: 5px;    
    float: left;
    width: 210px;
    height: 110px;
    position: relative;
    z-index:-1
}

ul.thumb_standard li img {
    position: relative;
    width: 200px;
    height: 100px;
    -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
}
.clear_both{clear:both;}
.light{ background-color:#FFFFFF;}
.pad_me{padding:5px 15px 0px 15px;}

</style>

动画弹出窗口的Jquery：

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

    $("ul.thumb_standard li").hover(function() {
            $(this).css({'z-index' : '1000'}); /*Add a higher z-index value so this image stays on top*/ 
            var li = $(this);
            var img = li.find('img');
            var div = li.closest('div');

            // Add hover class and stop animation
            li.addClass('hover');
            img.stop(); /* Stop animation queue buildup*/

            // Find the position relative to the div
            var new_width = 700;
            var new_height = 500;
            var new_left = (div.width() - new_width) / 2;
            var new_top = (div.height() - new_height) / 2;

            // Find the position relative to the li
            var li_offset = li.position();
            new_left -= li_offset.left;
            new_top -= li_offset.top;

            img.animate({                                   
                    top: '-100%',
                    left: new_left + 'px',
                    width: new_width + 'px',
                    height: new_height + 'px'
                }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

        } , function() {
            $(this).css({'z-index' : '-1'}); /*set z-index value back*/ 
            var li = $(this);
            var img = $(this).find('img');
            var div = $(this).parent('div');

            // Remove hover class and stop animation
            li.removeClass("hover");
            img.stop(); /* Stop animation queue buildup*/

            var new_width = 210;
            var new_height = 110;

            img.animate({
                    top: '0px',
                    left: '0px',
                    width: new_width + 'px',
                    height: new_height + 'px'
                }, 400); /* this value of "400" is the speed of how fast/slow this hover animates */
        }); //Closes .hover()
    }); //Closes .document()
</script>

Answer 1

z-index优先按你给出的顺序排列，例如，如果你有一个带有z-index 1的div和一个带z-index 0的popup div，弹出窗口会后面看起来很糟糕，所以你给了z -index高于1，这是2或4的任何东西，所以它需要更高的优先级。

因此对于弹出的图像或div来说，提供更高的z-index，如100或200，比现有的更高......

它将解决问题。

http://www.w3schools.com/css/pr_pos_z-index.asp

阅读上面的链接，它真的很有用

还有一件事，我认为你的代码中没有这个

$(this).css({'z-index' : '1000'}); /

更改为

$(this).css('z-index','1000');

Answer 2

永远无法解决这个问题......不得不让照片变小，问题再也不会出现了。

ie7的Z-index问题...在firefox中工作。图像显示在其他img的背后

2 个答案: