title: How do I keep position: relative content from overlapping my position: sticky header?
body: <p>I have a sticky top navbar that I want to stay visible and above all other content when scrolling. I have content on the page that I have set to <code>position: relative</code> so that I can position other elements around it. When I do this, the relative content ignores the navbar when scrolling and overlaps it. Is there any way for my to have my page content positioned relative and still have it observe the sticky navbar?</p>
  
  <p>I've tried giving the relative content a top margin equal to the height of the navbar.</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-css lang-css prettyprint-override"><code>.nav-bar {
    position: sticky;
    top: 0px;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: solid rgb(179, 173, 173) 1px;
    background-color: rgb(255, 255, 255);
  }
  
  .nav-bar #title {
    margin: 0;
    font-size: 2em;
    padding-left: 2%;
  }
  
  .test-class #test-content {
    width: 500px;
    height: 500px;
    background-color: rgb(70, 67, 67);
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav-bar"&gt;
    &lt;p id="title"&gt;Title&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="test-class"&gt;
    &lt;p id="test-content"&gt;&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Expected: sticky header stays above all other content.</p>
  
  <p>Actual: Content overlaps header when its position is set to relative.</p>