css - 固定要素は、Angular2 のウィンドウではなく、コンポーネントに相対的です

Question

スタイリングに Angular2-material ライブラリを使用する angular2 アプリケーションがあります。アプリケーションの右隅にホバーするFAB（フローティングアクションボタン）を追加しようとしていますが、ウィンドウではなく親コンポーネントに固定されています。

アプリケーションの階層は次のとおりです。

app.component
|-detail.component

app.component テンプレート内で、レイアウト ディレクティブの本体に router-outlet を指定して md-sidenav-layout ディレクティブを使用しています。

<md-sidenav-layout>
  <md-sidenav #sideNav (open)="closeStartButton.focus()">
    <router-outlet name="navMenu"></router-outlet>
    <br>
    <button md-button #closeStartButton (click)="sideNav.close()">Close</button>
  </md-sidenav>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sideNav.toggle()">
      <md-icon class="md-24">menu</md-icon>
    </button>
    <span>{{title}}</span>
  </md-toolbar>
  <div role="main">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

詳細コンポーネント テンプレートの内部では、テンプレートの上部に次のものがあります。

<button md-mini-fab class="fab" (click)="toggleAdd()">
  <i class="material-icons">add</i>
</button>

そして、そのコンポーネントの css:

.fab {
  display: block;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 10;
}

ただし、詳細ページに移動すると、.fab はウィンドウではなく、コンポーネントに対して相対的に配置されます。詳細コンポーネントで使用encapsulation: ViewEncapsulation.Noneしてみましたが、それも影響しません。ファブを詳細コンポーネント内で定義したままにする方法はありますが、ウィンドウに対して相対的に固定されていますか?