在css中的位置問題

Question

我用我的網站的jQuery圖像懸停。在風格標籤中，它有2個絕對位置。我想在圖像滑塊之後和3box之前顯示我的圖像，但是當我運行網站時，我的影響圖像位於3個框中。演示如下鏈接： http://rogatech.somee.com/ 我的第二個問題是，hoverd圖像的位置隨着放大或縮小而改變。我的代碼：

<style type="text/css"> 
    #cont { 
     text-align: center; 
     padding:auto; 
     position:inherit; 
     width: 970px; 
    } 

.img 
{ 
    position:absolute; 
    z-index:0; 
} 
    .end { 
     margin-right: 0; 
    } 
    .clear { 
     clear: both; 
    } 
    .img a img { 
     position: relative; 
     border: 0 solid #fff; 
    } 
</style> 

和：

<div class="img"><a href="#"> 
<img src="aksLink/Untitled-4.png" style=" margin:0 1px; width:135px; height:135px " /> 
</a></div> 
<div class="img"> 
<a href="#"> 
<img src="aksLink/Untitled-5.png" style=" margin:0 1px ; width:135px; height:135px " /> 
</a></div> 
<div class="img"> 
<a href="#"> 
<img src="aksLink/Untitled-3.png" style=" margin:0 1px ; width:135px; height:135px " /> 
</a></div> 

<div class="img"><a href="#"> 
<img src="aksLink/Untitled-6.png" style=" margin:0 1px ; width:135px; height:135px " /> 
</a> </div><div class="clear"></div></div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var cont_left = $("#cont").position().left; 
     $("a img").hover(function() { 
      // hover in 
      $(this).parent().parent().css("z-index", 1); 
      $(this).animate({ 
       height: "250", 
       width: "250", 
       left: "-=50", 
       top: "-=50" 
      }, "fast"); 
     }, function() { 
      // hover out 
      $(this).parent().parent().css("z-index", 0); 
      $(this).animate({ 
       height: "150", 
       width: "150", 
       left: "+=50", 
       top: "+=50" 
      }, "fast"); 
     }); 

     $(".img").each(function (index) { 
      var left = (index * 160) + cont_left; 
      $(this).css("left", left + "px"); 
     }); 
    }); 
     </script> 

Answer 1

終於我已經解決了我的問題，通過這個改變：

<style type="text/css"> 
     #cont { 
      text-align: center; 
      position:absolute; 
     left: 30px; 
      width: 970px; 



     } 

    .img 
    { 
     position:absolute; 
     z-index:0; 


    } 
     .end { 

     } 

     .clear { 
      clear: both; 
     } 
     .img a img { 
      position: relative; 
      border: 0 solid #fff; 
     } 
    </style> 

and

<div style=" position:relative "> 
    <div id="cont" style=""> 
    <div class="img"> 
    <a href="#"> 
<img src="aksLink/Untitled-1.png" style=" width:135px; height:135px " /> 
</a></div> 
<div class="img"> 
     <a href="#"> 
<img src="aksLink/Untitled-2.png" style=" width:135px; height:135px " /> 
</a></div> 

<div class="img"><a href="#"> 
<img src="aksLink/Untitled-4.png" style=" width:135px; height:135px " /> 
</a></div> 
<div class="img"> 
<a href="#"> 
<img src="aksLink/Untitled-5.png" style=" width:135px; height:135px " /> 
</a></div> 
<div class="img"> 
<a href="#"> 
<img src="aksLink/Untitled-3.png" style=" width:135px; height:135px " /> 
</a></div> 

<div class="img end"><a href="#"> 
<img src="aksLink/Untitled-6.png" style=" width:135px; height:135px " /> 
</a> </div><div class="clear"></div></div><br /><br /><br/> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var cont_left = $("#cont").position().left; 
     $("a img").hover(function() { 
      // hover in 
      $(this).parent().parent().css("z-index", 1); 
      $(this).animate({ 
       height: "250", 
       width: "250", 
       left: "-=50", 
       top: "-=60" 
      }, "fast"); 
     }, function() { 
      // hover out 
      $(this).parent().parent().css("z-index", 0); 
      $(this).animate({ 
       height: "135", 
       width: "135", 
       left: "+=50", 
       top: "+=60" 
      }, "fast"); 
     }); 

     $(".img").each(function (index) { 
      var left = (index * 140) + cont_left; 
      $(this).css("left", left + "px"); 
     }); 
    }); 
     </script> 
</div>