H2 element being hidden behind NavBar

I’m stuck and can’t understand why my h2 element isn’t showing up on the page and is instead hidden behind by nav bar.

If I set my header position to fixed, h2 is hidden behind it, same with absolute but it shows up with sticky. Why?

I feel like I’m missing something simple.

Thanks in advance
Tyler

When fixed, it stabilizes and moves forward. Therefore, h2 lags behind.

Have you tried setting z-index property?

I’m sorry, I don’t understand what this means.

I’ll take a look at that now and see if it will help.

Thank you.

Edit:

Ok, so if I change h2 to

h2 {
  color: white;
  position: relative;
  top: 70px;
}

It gets it below my navbar that has a absolute position. This seems hokey though to me, there must be a better way. I looked at z-index but that seems to be a attribute that tells which container to be displayed on top or behind another container. I want the containers to never overlap. I know I’m missing something here but I can’t figure out what.