title: position fixed element always inside the div
body: <p>I need to be able to position fixed element always inside the div.
  Problem is occuring when I resize the window. Then the fixed div is always floating above all other elements. How to prevent that? I need that div to be fixed but positioned inside the div .</p>
  
  <p>Here is an example:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="one" style="background-color:yellow;"&gt;&lt;/div&gt;
      &lt;div id="two" style="background-color:black;"&gt;&lt;/div&gt;
      &lt;div id="three" style="background-color:yellow;"&gt;
          &lt;div id="four"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main
  {
      position:relative;
      width:1200px;
      top:0;
      bottom:0;
      left:100px;
  }
  #one,#two,#three
  {
      position:relative;
      width:100px;
      height:1000px;
      float:left;
      top:0;
      bottom:0;
  }
  #four
  {
      position:fixed;
      top:50px;
      background-color:blue;
      width:100px;
      height:200px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Zjk74/" rel="nofollow">EXAMPLE</a> try moving horizontal scroll left and right and you will see what is happening.</p>