Установить позицию абсолютной в CSS для маршрутизатора-выхода в Angular2

Question

У меня есть сайт с этой базовой компоновкой

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

У меня есть компонент, который визуализируется на выходе маршрутизатора, который я хочу, чтобы отобразить на верхней части Navcontent , Для этого я пробовал с

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

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

Однако это помещает элемент чуть ниже элемента Navcontent. Как я могу разместить содержимое маршрутизатора поверх Navcontent в Angular2?

Answer 1

Попробуйте использовать отрицательный запас, чтобы сделать его переполнение своего родителя:

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

Answer 2

В компоненте попробовать с

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

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