为Angular2中的路由器出口在CSS中设置绝对位置

Question

I have a site with this base layout

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

I have a component that is rendered in the router outlet that I want to display on top of the Navcontent. To do this I tried with

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

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

However, this places the element just below the Navcontent element. How can I make place the content of the router-outlet on top of Navcontent in Angular2?

Answer 1

Try using a negative margin, to make it overflow its parent:

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

Answer 2

In your component try with

styles: [':host { /* your style */ }']

https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors