title: Trouble with jQuery resizable (of an absolute div within a relative div with scroll)
body: <p>I have the following basic layout:</p>
  
  <pre><code>&lt;div class="Container"&gt;
      &lt;div class="Content"&gt;&lt;/div&gt;
      &lt;div class="Selector"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The idea is that the selector div is marking an area within the content, and that area can be resized:</p>
  
  <pre><code>div.Container
  {
      border: 2px solid #00F;
      width: 240px;
      height: 300px;
      overflow: auto;
      position: relative;
  }
  
  div.Selector
  {
      position: absolute;
      top: 0px !important;
      left: 80px;
      width: 50px;
      height: 500px;
      border-left: 2px solid #F00;
      border-right: 2px solid #0F0;
      z-index: 10000;
  }
  
  div.Content
  {
      height: 500px;
      border: 1px solid #DEDEDE;
     background-color: #EFEFEF; 
  }
  </code></pre>
  
  <p>And the resizable selector:</p>
  
  <pre><code>$(document).ready(function() {
      $("div.Selector").resizable();
  });
  </code></pre>
  
  <p>The problem, which can be seen here - <a href="http://jsfiddle.net/sXqbV/2/" rel="nofollow noreferrer">http://jsfiddle.net/sXqbV/2/</a> - is happening when the container is horizontally scrolled.</p>
  
  <p>Once the div is being resized (by slightly dragging its right edge), its left position is reduced (relatively to the scroll position):</p>
  
  <p><img src="https://i.stack.imgur.com/ayZAr.png" alt="enter image description here"></p>
  
  <p>I had a similar issue with the vertical scroll, but I solved it by adding <code>!important</code> to the top style. I cannot do it with the left position though, because I will probably need it to be resizable from the left too.</p>
  
  <p>How can I fix this problem?</p>