相對定位和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指數對我來說一直是一個灰色地帶，我試圖弄清楚它。我必須使用絕對定位還是我只是做錯了什麼？提前致謝。

Answer 1

是使用絕對定位和動畫圖像，兩者的左側。圖像的左側默認爲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"); 
     } 
); 

Answer 2

你必須在這種情況下使用position:absolute，用適當的z-index檢查http://jsfiddle.net/tbHDt/1/