Chce stworzyć 4 divy - kwadrat 2x2 divy.

Wszystko wygląda pięknie, ale jak odpalam zdarzenie hover, które powinno lekko poruszyć konkretnego diva to tylko, lewy górny zachowuje się zgodnie z oczekiwaniami, pozostałe szaleją po ekranie.

CSS:

[PHP] pobierz, plaintext 
#zawartosc_index {
  margin-left:20%;
  position:absolute;
}
#ofirmie {
  position: relative;
  width: 300px;
  height:300px;
  border:20px solid white;
  background-color:#99CC00;
  color:white;
  float:left;
}
#panel_klienta {
  position: relative;
  border:20px solid white;
  width: 300px;
  height:300px;
  background-color:#33CCCC;
  float:right;
  color:white;
}
#oferta {
  position: relative;
  border:20px solid white;
  width: 300px;
  height:300px;
  background-color:#FF9900;
  float:left;
  color:white;
}
#kontakt {
  position: relative;
  border:20px solid white;
  width: 300px;
  height:300px;
  background-color:#CC99FF;
  float:left;
  color:white;
}
[PHP] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<div id="zawartosc_index">
 
<div  id="ofirmie">
<h2 class="h2index">O firmie</h2>
</div>
 
<div  id="panel_klienta">
<h2 class="h2index">Panel Klienta</h2>
</div>
 
   <div style="clear:both;"></div>
 
<div  id="oferta">
<h2 class="h2index">Oferta</h2>
</div>
 
 
<div  id="kontakt">
<h2 class="h2index">Kontakt</h2>
</div>
 
</div>
[HTML] pobierz, plaintext 

i Jeszcze na koniec Jquery:

[PHP] pobierz, plaintext 
$(document).ready(function(){
// HOVER oferta 
   var topo = $('#oferta').position().top;
   var lefto = $('#oferta').position().left;
 
 $('#oferta').hover(function(){
  $(this).animate({top: $(this).position().top+10, left: $(this).position().left - 20},{duration: 200, queue: false});
   }, function(){
   $(this)
   .stop(true)
   .animate({top: topo, left: lefto},'fast');
   });
 
// HOVER O firmie 
   var topf = $('#ofirmie').position().top;
   var leftf = $('#ofirmie').position().left;
 
 $('#ofirmie').hover(function(){
  $(this).animate({top: $(this).position().top-10, left: $(this).position().left - 20},{duration: 200, queue: false});
   }, function(){
   $(this)
   .stop(true)
   .animate({top: topf, left: leftf},'fast');
   });
 
// HOVER panel klienta
   var topp = $('#panel_klienta').position().top;
   var leftp = $('#panel_klienta').position().left;
 
 $('#panel_klienta').hover(function(){
  $(this).animate({top: $(this).position().top-10, left: $(this).position().left - 30},{duration: 200, queue: false});
   }, function(){
   $(this)
   .stop(true)
   .animate({top: topp, left: leftp},'fast');
   });   
 
// HOVER kontakt
   var topk = $('#kontakt').position().top;
   var leftk = $('#kontakt').position().left;
 
 $('#kontakt').hover(function(){
  $(this).animate({top: $(this).position().top+10, left: $(this).position().left + 30},{duration: 200, queue: false});
   }, function(){
   $(this)
   .stop(true)
   .animate({top: topk, left: leftk},'fast');
   });
});
[PHP] pobierz, plaintext 

Dla wszystkich boksów wewnątrz kontenera masz ustawione position:relative więc operacje na ich właściwościach absolutnych (top, bottom, left i right) są bez sensu.
Kontener zawierający boksy powinien mieć position:relative i ustawione wymiary, a same boksy position:absolute i pozycję (top, bottom, left, right). Mając tak ostylowane elementy możesz się bawić ich pozycją absolutną (względem kontenera).
Mam nadzieję, że nie namieszałem...
Przykład dla jednego elementu:

[HTML] pobierz, plaintext 
#oferta {
  position: absolute;
  bottom: 0;
  left: 0;
  border:20px solid white;
  width: 300px;
  height:300px;
  background-color:#FF9900;
  float:left;
  color:white;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
var boxW = 300;
var boxH = 300;
 
$('#oferta').hover(function(){
   $(this)
      .animate({
         bottom: -20,
         left: -20,
         width: boxW + 20,
         height: boxH + 20
      }, {
         duration: 200,
         queue: false
      });
}, function(){
   $(this)
      .stop(true)
      .animate({
         bottom: 0,
         left: 0,
         width: boxW,
         height: boxH
      }, 'fast');
});
[HTML] pobierz, plaintext 

Super, działa, dzięki .

Jestem jeszcze początkujący i czasem zdarza mi się nie przemyśleć wszystkiego .