title: side fixed menu overlaps below div
body: <p>Here is the code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;style&gt;
  body {
      font-family: "Lato", sans-serif;
  }
  
  .sidenav {
      width: 130px;
      position: fixed;
      z-index: 1;
      top: 20px;
      left: 10px;
      background: #eee;
      overflow-x: hidden;
      padding: 8px 0;
  }
  
  .sidenav a {
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 25px;
      color: #2196F3;
      display: block;
  }
  
  .sidenav a:hover {
      color: #064579;
  }
  
  .main {
      margin-left: 140px; /* Same width as the sidebar + left position in px */
      font-size: 28px; /* Increased text to enable scrolling */
      padding: 0px 10px;
  }
  
  @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="sidenav"&gt;
    &lt;a href="#about"&gt;About&lt;/a&gt;
    &lt;a href="#services"&gt;Services&lt;/a&gt;
    &lt;a href="#clients"&gt;Clients&lt;/a&gt;
    &lt;a href="#contact"&gt;Contact&lt;/a&gt;
    &lt;a href="#about"&gt;About&lt;/a&gt;
    &lt;a href="#services"&gt;Services&lt;/a&gt;
    &lt;a href="#clients"&gt;Clients&lt;/a&gt;
    &lt;a href="#contact"&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;
    &lt;h2&gt;Auto Sidebar&lt;/h2&gt;
    &lt;p&gt;This sidebar is as tall as its content (the links), and is always shown.&lt;/p&gt;
    &lt;p&gt;Scroll down the page to see the result.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
    &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;/p&gt;
  &lt;/div&gt;    
  &lt;div&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  &lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  &lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  &lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  &lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  Full Width!&lt;br/&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://www.w3schools.com/code/tryit.asp?filename=FXMUNIYEA9C7" rel="nofollow noreferrer">Click Here for the practical scenario</a>
  I want to keep the sidenav till the main div finishes. its overlapping the following div elements.</p>
  
  <p>To understand the problem, please scroll to the end and you will see the left side nav is overlapping the other divs below.</p>