html - 相对定位元素显示在我的固定导航栏上

Question

我做了一个固定的导航栏，然后是一个标题，我使用相对位置将它放在固定的导航栏下方。但是当我向上滚动时，标题会显示在导航栏上。

<section class="nav-bar">
  <ul>
    <li class="nav-left">LOGO</li>
    <li class="nav-right"><a href="">FACEBOOK</a></li>
    <li class="nav-right"><a href="">GITHUB</a></li>
    <li class="nav-right"><a href="">TREEHOUSE</a></li>
  </ul>
</section>
<h1 class="head">THIS IS THE HEADER</h1>

h1 {
  position: relative;
  top:2em;
}
.nav-bar{
  background-color: blue;
  width:100%;
  position:fixed;
  margin-top:-1.25em;
  margin-left:-.55em;
  padding-bottom:1em;

}

关于如何将页眉保留在导航栏后面的任何建议？我确定它与固定和相对定位有关，但还没有找到任何关于如何解决这个问题的方法。

Answer 1

Hanif 是对的，在.nav-bar 中加入z-index 就可以达到你想要的效果。

h1 {
  position: relative;
  top:2em;
}
.nav-bar{
  background-color: blue;
  width:100%;
  position:fixed;
  margin-top:-1.25em;
  margin-left:-.55em;
  padding-bottom:1em;
  z-index: 99;
}

<section class="nav-bar">
  <ul>
    <li class="nav-left">LOGO</li>
    <li class="nav-right"><a href="">FACEBOOK</a></li>
    <li class="nav-right"><a href="">GITHUB</a></li>
    <li class="nav-right"><a href="">TREEHOUSE</a></li>
  </ul>
</section>
<h1 class="head">THIS IS THE HEADER</h1>