固定元素是相對於組件，而不是Angular2中的窗口

Question

我有一個angular2應用程序使用Angular2材質庫進行樣式設置。 我正在嘗試添加一個FAB（浮動操作按鈕）懸停在應用程序的右上角，但它將自己固定到其父組件，而不是窗口。

應用程序的層次結構如下：

app.component
|-detail.component

在app.component模板中，我在layout指令的主體中使用帶有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 ，但這也不會影響它。 有沒有辦法保持fab在詳細信息組件中定義，但仍然相對於窗口固定？

Answer 1

尋找在鏈上應用CSS轉換的東西。 在我的例子中，我通過Angular動畫應用了一個變換。 顯然改變了休息位置：固定。 為什么`transform` break`position：fixed`？

我希望我現在可以弄清楚如何使這項工作。

Answer 2

在你的app.component.html中添加以下代碼：

<md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
</md-sidenav-container>

global styles.css：

html, body, material-app, md-sidenav-container, .my-content {
    margin: 0;
    width: 100%;
    height: 100%;
}

這個對我有用！ ;）

Answer 3

我在這里回答了一個非常相似的問題

要點：我用一個非常繁重的解決方法解決了這個問題。 我從主要內容中刪除了FAB，在我的模板中定義了一個輔助路由器插座（在md-sidenav-layout之外），為FAB創建了一個獨立組件，並在服務中使用Observable將click事件廣播到主要組件。

另一個線程的答案包含代碼示例和一個有效的plunker示例。