导航栏：当我将导航栏固定在顶部时，我的组件也固定在顶部答案

【问题标题】：Navbar: when I fixed the navbar to the top, my components are also fixed to the top导航栏：当我将导航栏固定在顶部时，我的组件也固定在顶部
【发布时间】：2020-05-30 10:33:13
【问题描述】：

我使用 Angular 从事一个个人项目。我想要一个顶部固定导航栏在<nav> 中写“固定顶部”。导航栏是固定的，但问题是我的组件也固定在顶部，这是一个我不知道如何解决的大问题。你可以在我的屏幕上看到吗，我的组件电影列表也固定在顶部，因此组件的顶部被导航栏隐藏。这是所有组件/页面的问题。

[This is a screen of my app.]1

这是我的导航栏模板

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
          <img src="../../assets/logo1.png" alt="">
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Search
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" routerLinkActive="active" routerLink="search/movie">Movie</a>
            <a class="dropdown-item" routerLinkActive="active" routerLink="search/tv-show">Tv Show</a>
          </div>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="movies">Movies</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link"routerLink="tv-shows">Tv Shows</a>
        </li>
      </ul>
    </div>
</nav>

这是css

nav {
-webkit-box-shadow: 0px 5px 4px -1px rgba(173,161,173,1);
-moz-box-shadow: 0px 5px 4px -1px rgba(173,161,173,1);
box-shadow: 0px 5px 4px -1px rgba(173,161,173,1);
height: 60px;
width: 100%;
}

这是我调用导航栏的应用组件

<app-header></app-header>
<router-outlet></router-outlet>

如果你有什么想法，请帮助我。

谢谢

【问题讨论】：

标签： css angular navbar fixed

【解决方案1】：

问题来了：

<nav class=". . . fixed-top . . .">

您已指定fixed-top 类。这意味着导航栏将在内容下方重叠。

您可以尝试删除该类。或者，如果您想要该特定类，请尝试添加填充：body { padding-top: 80px; }（80 像素或您认为显示的 Web 内容更舒适的内容）。

【讨论】：