adding Sticky FAB in Angular 2 Material - css

Question

I want to add a sticky button at the bottom of screen (not page) in my angular 2 material project.
I tried some tweaks but currently when I scroll down the button doesn't stays where it was supposed to be.
before scroll it looks like below:
after scroll:
Elements's HTML inside template:
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
CSS Applied on the Element Except for any defaults:
#fab{
position: fixed;
right: 30px;
bottom: 30px;
}
*{
margin: 0;
}
How can I fix this?
Additionally is there any built in way with Angular material to do what I want?
UPDATE:
My main component's Template:
<toolbar></toolbar>
<side-nav></side-nav>
Side Nav's Template:
<md-sidenav-container id="sidenav-container">
// contents
<router-outlet></router-outlet>
</md-sidenav-container>
and its CSS:
#sidenav-container { // styling to make side nav of full height
position: fixed;
height: 90%;
min-height: 90%;
width: 100%;
min-width: 100%;
}
and then inside the component added by the router-outlet will come FAB element.
Notes-list component's template (the one shown in the images):
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
//rest of the content
LIVE DEMO

Answer 1

You are correct to put the router-outlet within the md-sidenav-container.
Add the follow class to your FAB element.
.md-fab-bottom-right2 {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
}
This is how I got it to work.

Answer 2

Add a custom class and apply your styles also look for the hierarchy in which files are referenced to DOM
<div class="example-container">
<h3>sticky icons</h3>
<a class="mine" md-fab routerLink=".">
<md-icon>check</md-icon>
</a>
<a md-mini-fab routerLink=".">
<md-icon>check</md-icon>
</a>
</div>
LIVE DEMO
Update 1 :
You are using the icon inside the md-sidenav container which is a mistake
<div class="example-container">
<md-sidenav-container>
<md-sidenav #sidenav>
<p>side nav works</p>
</md-sidenav>
</md-sidenav-container>
<p>content</p>
<a class="mine" md-fab (click)="sidenav.open()">
<md-icon>check</md-icon>
</a>
</div>
Updated Demo
Update 2 :
Look at the below code, you are wrapping everything inside sidenav which is wrong. Use as below
<md-sidenav-container id="sidenav-container"> </md-sidenav-container>
// contents
<router-outlet></router-outlet>