title: jquery offset() and position()
body: <p>I need to get position of element relative to its parent. <code>position()</code> is suppose to do that but it looks like it doesn't.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
  
    body{padding: 0px; margin: 0px;}
    div { margin-left: 200px; padding: 30px; border: 1px solid red;}
    p { margin: 0px; padding: 0px; border: 1px solid black }
    &lt;/style&gt;
    &lt;script src="http://code.jquery.com/jquery-1.5.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(document).ready(function() {
  
              var p = $("p.paragraf");
              var position = p.offset();
              $("p.zadnji").text( "left: " + position.left + ", top: " + position.top );
  
          });
      &lt;/script&gt;  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;p class="paragraf"&gt;Hello&lt;/p&gt;
  &lt;/div&gt;
  &lt;p class="zadnji"&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Result:</p>
  
  <blockquote>
    <p>left: 231, top: 31</p>
  </blockquote>
  
  <p>If <code>p.paragraf</code> is inside <code>#container</code> then <code>#container</code> should be parent to <code>p.paragraf</code>. If padding of <code>#container</code> is set to 30px, shouldn't both left and top position of  <code>p.paragraf</code> be 30px? </p>
  
  <p>I tried <code>offset()</code> but it gives the same result as <code>position()</code></p>