javascript - 相对定位和 z-index？

Question

代码如下:

$(".image").hover(
function() {
    $(this).animate({ height: "100", width: "100"}, "fast");
    $("image-two").css("z-index", "-1");
}, function() {
    $(this).animate({ height: "50", width: "50"}, "fast");
    $("image").css("z-index", "0");
    }
);

$(".image-two").hover(
    function() {
        $(this).animate({ height: "100", width: "100"}, "fast");
        $("image").css("z-index", "-1");
    }, function() {
        $(this).animate({ height: "50", width: "50"}, "fast");
        $("image").css("z-index", "0");
        }
);

<div class="main">
<img src="../images/templateone.png" class="image" alt=""/>
<img src="../images/templatetwo.png" class="image-two" alt=""/>
<script src="../javascript/gallery.js"></script>
</div>

.image {
position: relative;
width: 50px;
height: 50px;   
}

.image-two {
position: relative;
width: 50px;
height: 50px;
}

这里的要点是让一个盒子在另一个盒子上扩展而不相互移动。我知道 z-index 需要定位，但 position: relative; 似乎不适合我。 Z-index 对我来说一直有点灰色地带，我正在努力弄清楚。我必须使用绝对定位还是我只是做错了什么？提前致谢。

Answer 1

在这种情况下，您必须使用 position:absolute，并进行适当的 z-index 检查 http://jsfiddle.net/tbHDt/1/