title: div above another div, but should scroll beneath the later one
body: <p>there is a <code>div</code> (namely <code>div_fixed</code>) which is  fixed in position. Another <code>div</code> namely <code>other_content</code> is beneath the <code>div_fixed</code>. The <code>other_content</code> div has a <code>padding-top</code> property  so that when the page is scrolled only the <code>other_content</code> is scrolled beneath the fixed div.</p>
  <p>The fiddle is <a href="http://jsfiddle.net/BCRPa/" rel="nofollow noreferrer">here</a></p>
  <p>HTML :</p>
  <pre><code>&lt;div class=&quot;div_fixed&quot;&gt;FIXED&lt;/div&gt;
  &lt;div class=&quot;other_content&quot;&gt;
      content goes here&lt;br/&gt;
      content goes here&lt;br/&gt;
      content goes here&lt;br/&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>     div { color: #fff }
          .div_fixed { position: fixed;  
      width: 100%; 
      height: 100px; 
  
      
      }
  
  .other_content { 
  background: #f00; 
  height: 5000px; 
  color: #fff; 
  padding-top: 100px; 
  
  margin:0 auto;
  
  }
  </code></pre>
  <p>But I want the non-fixed div to stay upon the fixed div and want the non-fixed div to disappear just beneath its upper edge i.e. position of the non-fixed div's upper edge will remain fixed but it's content will start disappearing on page scroll just the way it happened when it was staying beneath the fixed div.</p>
  <p>So i had a little edit in the html ( just 2 breaks) before the non-fixed div :</p>
  <pre><code>    &lt;div class=&quot;div_fixed&quot;&gt;FIXED&lt;/div&gt;
  &lt;br&gt;&lt;br/&gt;
          &lt;div class=&quot;other_content&quot;&gt;
              content goes here&lt;br/&gt;
              content goes here&lt;br/&gt;
              content goes here&lt;br/&gt;
          &lt;/div&gt;
  </code></pre>
  <p>The addition in css is:</p>
  <pre><code>  .fixed_div{
      
      z-index:-1;
      }
      
      .other_content{
      
      
      width:60%;
      z-index:99099900;
  
      
      }
  </code></pre>
  <p>But the upper edge of the non-fixed div does not stay at the position I want.</p>
  <p>How to achieve that ?</p>
  <p><strong>EDIT</strong> :</p>
  <p>suppose I add a background image  for the non-fixed <code>div</code>. Is it possible that part of  background image of the fixed  <code>div</code> over which the other div will scroll will have a <code>z-index</code> higher than that of the non-fixed <code>div</code> ? Will the problem be solved in that way ?</p>
  <p><strong>EDIT2</strong></p>
  <p>Let use suppose that <code>fixed_div</code> is the header, <code>other_content</code> is the <strong>content body</strong> of a webpage. Let us add a footer <code>div</code> with id <code>footer</code>. No scroll should be present in <code>other_content</code>. <code>other_content</code> should scroll when the page is scrolled.</p>