固定元素是相对于组件,而不是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%;
}

这个对我有用!;)