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

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>

​