How do I keep position: relative content from overlapping my position: sticky header?

Question

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 position: relative 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?

I've tried giving the relative content a top margin equal to the height of the navbar.

.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;
}

<div class="nav-bar">
  <p id="title">Title</p>
</div>
<div class="test-class">
  <p id="test-content"></p>
</div>

Expected: sticky header stays above all other content.

Actual: Content overlaps header when its position is set to relative.

Answer 1

If you want your navbar stay always visible just give it a z-index bigger than your content

.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);
    z-index: 1
}