title: Get position of table cell within overflow element
body: <p>I want to get the position/offset of a table cell and then using this data I want to append and position a new element in the exact same position.</p>
  
  <p>The code to achieve this is as follows:</p>
  
  <pre><code>function addBlock()
  {
      // get the cell position
      var cellPosition = $('.item').position(),
          cellPositionTop = cellPosition.top,
          cellPositionLeft = cellPosition.left;
  
      // append the overlay
      var blockOverlay = $('&lt;div class="blockOverlay"&gt;&lt;/div&gt;').appendTo('.container').hide();
  
      // set the overlay width and height to the same as the cell
      blockOverlay.css({
          'background-color':'blue',
          'width': $('.item').outerWidth(),
          'height': $('.item').outerHeight()
      });
  
      // position the overlay in the same place as the cell
      blockOverlay.css({
          'position': 'absolute',
          'top': cellPositionTop,
          'left': cellPositionLeft
      });
  
      // show the overlay
      blockOverlay.show();
  }
  </code></pre>
  
  <p>The table containing the cell is quite big and sits inside an overflowing element meaning that the table cell may be offscreen. If the above code is run without scrolling then it works fine, however if I scroll and then run it, the offset is incorrect. This is because even though I am using <code>position()</code> and not <code>offset()</code> it is getting the cell position relative to its parent (.container) at the time of calling the function, rather that its position regardless of the scroll position.</p>
  
  <p>How can I solve this?</p>
  
  <p>Here is a fiddle that shows the problem: <a href="https://jsfiddle.net/25e6qmnh/" rel="nofollow">https://jsfiddle.net/25e6qmnh/</a></p>
  
  <p>Try clicking the button at various scroll positions and you will see that blue box only ever overlays the red cell when at the start position. It should ALWAYS overlay the red cell regardless of the scroll position.</p>