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

Question

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

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

app.component 
|-detail.component 

內app.component模板，我使用與路由器出口的MD-sidenav佈局指令在佈局指令的身體：

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

：

<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> 

裏面的細節分量模板，我有在模板的頂部以下10

與該組件的CSS：

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

然而，當我導航到詳細信息頁面，該.fab相對於該組件，而不是窗口的位置。我已經嘗試在細節組件上使用encapsulation: ViewEncapsulation.None，但這也不會影響它。有沒有辦法將工廠定義在細節組件中，但是它仍然相對於窗口是固定的？

Answer 1

尋找應用CSS變換鏈上的東西。在我的情況下，我通過Angular動畫應用了一個轉換。顯然轉換中斷位置：固定。 Why does `transform` break `position: fixed`?

我希望我能弄清楚現在如何完成這項工作。

Answer 2

我回答了一個非常類似的問題here。

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

在另一個線程中的答案包含代碼示例和一個工作的plunker示例。

Answer 3

在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> 

全球的styles.css：

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

它爲我的作品！ ;）