title: fix the position of a div inside body
body: <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="inside"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="special-div"&gt;
      &lt;/div&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>I need to have my <code>special-div</code> outside container for some js considerations</p>
  
  <pre><code>#inside{
       margin:auto;
       width:760px;
  }
  #special-div{
       position:relative;
       top:200px;
       left:300px
  }
  </code></pre>
  
  <p>With the above CSS,the position of the <code>special-div</code> changes with change in browser size change?
  So,how do i fix the position of the <code>special-div</code> irrespective of the browser size?</p>