时间戳

首页 > 解决方案 > 相对定位元素显示在我的固定导航栏上

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

问题描述

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

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

}

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

标签： htmlcss

解决方案

Hanif 是对的，添加z-index到.nav-bar达到你想要的效果。

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>

推荐阅读