title: Fixed div overlapping content?
body: <p>I have a div with position: fixed but when I scroll the window at the bottom the div overlaps with the footer. I dont want the div to overlap with the footer.</p>
  
  <p>What changes should I make in css to overcome that.</p>
  
  <p><code>a.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="a.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="contain"&gt;
              &lt;div class="data1"&gt;&lt;/div&gt;
              &lt;div class="data"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="footer"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><code>a.css</code></p>
  
  <pre><code>.contain {
      margin-bottom: 35rem;
  }
  .data {
      background-color: red;
      width: 30%;
      margin-top: -33%;
      position: fixed;
      height: 600px;
  }
  
  .data1 {
      width: 30%;
      height: 500px;
      margin-left: 60%;
      background-color: black;
  }
  
  .footer {
      background-color: blue;
      width: 100%;
      height: 150px;
      bottom: 0;
  }
  </code></pre>