css - 在 css 中为 Angular2 中的路由器导出设置绝对位置

Question

我有一个具有这种基本布局的网站

  <nav>
    Navcontent
  </nav>
  <router-outlet></router-outlet>

我有一个在路由器 socket 中呈现的组件，我想将其显示在 Navcontent 的顶部。为此，我尝试了

.album-select-bar {
  z-index: 100;
  position: absolute;
  top: 0px;
}

<app-album-select-bar class="album-select-bar"></app-album-select-bar>

但是，这会将元素放置在 Navcontent 元素的正下方。如何在 Angular2 中将路由器导出的内容放置在 Navcontent 之上？

Answer 1

尝试使用负边距，使其溢出其父级:

.album-select-bar {
  z-index: 100;
  position: absolute;
  top: 0px;
  height: 50px;
  margin-top: -50px; //should equal height.
}