title: Div elements not positioning properly
body: <p>I am using 2 <code>div</code> elements. These elements are overlapping each other, but I want them to follow one after another.    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Online&lt;/title&gt;
      &lt;style&gt;
      .rectangle {
       min-height: 40px;
       margin-bottom: 20px;
       border: 1px solid transparent;
       height: 65px;
       position: fixed;
       top: 0px;
       right: 0px;
       left: 0px;
       border-radius: 0px;
       background-color:#67518e;
       z-index:15;
       
      }
      .section-content {
          padding-top: 30px;
          padding-bottom: 30px;
          border-top: 1px solid green;
          border-bottom: 1px solid green;
       position: absolute;
       right: 0; 
       left: 0;
       z-index: 10;
       background-color: yellow;
       }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
       &lt;div class="rectangle"&gt; 
       &lt;/div&gt; 
      &lt;div class="section-content"&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>