Set a div to 'position fixed' in an Angular2 inner-component - css

Question

I have a main component:
<md-sidenav-layout fullscreen>
<md-sidenav #sidenav>
<md-nav-list>
<a md-list-item *ngFor="let view of views">
<md-icon md-list-icon>{{view.icon}}</md-icon>
<div style="clear:right"></div>
<div class="description-wrapper">
<span md-line>{{view.name}}</span>
<span md-line class="secondary">{{view.description}}</span>
</div>
</a>
</md-nav-list>
</md-sidenav>
<md-toolbar *ngIf="!menuToolbarConfig.IsLoginView">
<div (click)="menuToolbarConfig.goToApprovals()" class="goBack" *ngIf="menuToolbarConfig.IsDetailView">
<md-icon>navigate_before</md-icon>
</div>
<button *ngIf="!menuToolbarConfig.IsDetailView" md-icon-button (click)="sidenav.open()">
<md-icon>menu</md-icon>
</button> {{menuToolbarConfig.ToolbarTitle}}
<!--<button md-fab>
<md-icon>add</md-icon>
</button>-->
</md-toolbar>
<router-outlet></router-outlet>
</md-sidenav-layout>
<div style="background-color: red; height: 30px; width: 100%; position: fixed; top: 0px"></div>
As you can see I am using the official Angular2 material-framework. On every page the toolbar and the sidenav should appear, so I put the <router-outlet> in the <md-sidenav-layout>. Everything is fine, but now I want to create a snackbar that appears out of the bottom of the screen and should be fixed to the bottom. Now I have the problem, when I place the snackbar in a inner-component, that replaces the <router-outlet>, and I want to set the snackbar 'position: fixed' the snackbar would be correctly shown in the bottom of the page, but if I scroll, than the snackbar dont stay at the bottom instead its hovering over the bottom. But when I place a test div (last line) outside the <md-sidenav-layout> it works fine. So the problem is, that the fixed snackbar/div is within the <md-sidenav-layout>. But I need to have the snackbar in my inner-component.
My question now: Is there any smart solution to fix this problem, without a big workaround?
Thank you in advance!