Javascript 相对定位和z指数？

代码如下：

$(".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;
}

$（“.image”）。悬停(
函数（）{
动画（{height:“100”，width:“100”}，fast”）；
$（“图像二”）.css（“z-index”，“-1”）；
}，函数（）{
动画（{height:'50'，width:'50}，fast”）；
$（“图像”）.css（“z-index”，“0”）；
}
);
$（“.image二”）。悬停(
函数（）{
动画（{height:“100”，width:“100”}，fast”）；
$（“image”）.css（“z-index”，“-1”）；
}，函数（）{
动画（{height:'50'，width:'50}，fast”）；
$（“图像”）.css（“z-index”，“0”）；
}
);
.形象{
位置：相对位置；
宽度：50px；
高度：50px；
}
图二{
位置：相对位置；
宽度：50px；
高度：50px；
}

---

这里的要点是使一个盒子在另一个盒子上展开，而不使它们彼此移动。我知道z-index需要定位，但是

位置：相对似乎不适合我。Z指数对我来说总是有点像灰色地带，我正试图找出它。我必须使用绝对定位还是我只是做错了什么？提前感谢。
在这种情况下，您必须使用
位置：绝对
在适当的z索引检查下
是使用绝对位置并为图像2的左侧设置动画。图像的左侧默认为0，两者的顶部也默认为0

.image {
    position: absolute;
    width: 50px;
    height: 50px;

}
.image-two {
   position: absolute;
   left: 55px;
   width: 50px;
   height: 50px;
}


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