title: How to make a div inside a relative positioned keep position to its container when scrolling
body: <p>All:</p>
  
  <p>Thanks for help.</p>
  
  <p>The html structure is like:</p>
  
  <pre><code>&lt;div id="container" style="position:relative; top:100px; left:100px; width:200px; height:300px; overflow: auto;"&gt;
      &lt;div id="absoluteinner" style="position:absolute; top:10px; left:10px; width:100px; height:100px; background-color:red;"&gt;
      &lt;/div&gt;
      &lt;div id="staticinner" style="width:100px; height:800px; background-color:purple;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought that absoluteinner can keep a fixed position relative to its container, but when I scroll the container, the absoluteinner moves as the staticinner. How can I make it position fixed?</p>