title: HTML element in position:absolute vs. scroll
body: <p>I have two div with <code>position</code> attribute set to <code>absolute</code>. One of these is a son of another scrollable div. Something like that:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="foo" id="outside"&gt;&lt;/div&gt;
  
    &lt;div class="bar"&gt;
      &lt;div class="foo" id="inside"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In CSS:</p>
  
  <pre><code>.foo{position:absolute;}
  .bar{max-width: 300px;}
  </code></pre>
  
  <p>Now, let's say the <code>bar</code> div has a long content and so the user can scroll it (just the div, not the entire page!); the <code>inside</code> div won't scroll with his father. On the contrary, the <code>outside</code> div will scroll with the entire page if it's long enough to scroll. I want the <code>inside</code> div to scroll with the <code>bar</code> div, how can I reproduce the behavior of the <code>outside</code> div on the <code>inside</code> div?</p>
  
  <p>EDIT: I read again my post, it wasn't so straightforward, I'm sorry. I'll try with an example:</p>
  
  <p><a href="http://jsfiddle.net/QYHSd/2/" rel="nofollow">http://jsfiddle.net/QYHSd/2/</a></p>
  
  <p>I want the red div to scroll with the content of the green one when the user scrolls the green div. Sorry again if I'm not able to explain well what Id' like to obtain.</p>