title: Undefined CSS attribute (top/left)
body: <p>So I have this code:
  HTML: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;title&gt;Joc&lt;/title&gt;
  &lt;/head&gt;
  &lt;body onload="funcio()"&gt;
      &lt;img src="juanca.jpg" class="rey"&gt;
      &lt;img src="elefant.gif" id="elefant"&gt;
      &lt;button id="boton"&gt; press me!&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      background-image:url("hierba.jpg");
  }
  .rey {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0px;
      left: 0px;
      transition: top 5s linear, left 5s linear;
  }
  .reyMov{
      width: 100px;
      height: 100px;
      position:absolute;
      top:1px;
      left:1px;
  }
  #elefant{
      width: 100px;
      height: 100px;
      position: absolute;
      top: 500px;
      left: 700px;
  }
  #boton{
      position: absolute;
      top:50px;
      left: 45%;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function funcio(){
          alert("reyMov orig top "+$(".reyMov").css("top"))
          var posicio = $("#elefant").position();
          $(".reyMov").css("top",posicio.top+"px;");
          var posicio2 = $(".reyMov").position();
          alert("reyMov new top "+posicio2.top);
  </code></pre>
  
  <p>};</p>
  
  <p>As you can see, I have defined top and left attributes for the class reyMov on CSS, but when I try to acces it (with alert), the js console returns me "Uncaught TypeError: Cannot read property 'top' of undefined"</p>
  
  <p>I also tried to change this attribute and get it again, but does not work.
  Any tip for fixing this?
  Thank you!</p>