title: Floating Action Button not scrolling
body: <p>I have a FAB contained in two <code>div</code> tags from parent (<code>app.component.html</code>) where one of them uses transform: translate3d.<br>
  When scrolling down the page, the FAB is 'stuck' and doesn't scroll.</p>
  
  <p>I want this FAB to overlay this entire HTML page (specifically: <code>&lt;div class="page-content"&gt;</code>)<br>
  HTML:  </p>
  
  <pre><code>  &lt;div cdk-scrollable="" class="mat-sidenav-content" ng-reflect-ng-style="    " style="margin-left: 0px; margin-right: 0px; transform:     translate3d(0px, 0px, 0px);"&gt;
        &lt;div class="page-container"&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;app-carbuilder _nghost-wxw-148=""&gt;
              &lt;button style="position: absolute;bottom: 16px;right: 16px;z-index: 5" data-toggle="collapse" data-target="#demo"  aria-expanded="false" aria-controls="demo" md-fab&gt;
              &lt;md-icon&gt;
                directions_car
              &lt;/md-icon&gt;
            &lt;/button&gt;
          &lt;div class="page-content"&gt;
              &lt;p&gt;content&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>(Native image upload didn't work)<br>
  Here's how it looks before &amp; after scroll:</p>
  
  <p><a href="http://i63.tinypic.com/2ytz4i1.jpg" rel="nofollow noreferrer">Before</a><br>
  <a href="http://i66.tinypic.com/mkx89i.png" rel="nofollow noreferrer">After</a></p>
  
  <p>Note:<br>
  <a href="https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children">Similar but not duplicate</a><br>
  <a href="https://github.com/angular/material2/issues/998" rel="nofollow noreferrer">Related </a><br>
  <a href="https://github.com/angular/material2/issues/2205" rel="nofollow noreferrer">Also Related </a></p>