cssangularangular2-material

Fixed element is relative to component, not window in Angular2

I have an angular2 application using the Angular2-material library for styling. I'm trying to add a FAB (Floating Action Button) to hover in the right corner of the application, but it's fixing itself to its parent component, and not the window.

The hierarchy of the application is as follows:

app.component
|-detail.component

Within the app.component template, I am using the md-sidenav-layout directive with router-outlet in the body of the layout directive:

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

Inside the detail component template, I have the following at the top of the template:

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

And the css for that component:

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

However, when I navigate to the detail page, the .fab is positioned relative to the component, not the window. I've tried using encapsulation: ViewEncapsulation.None on the detail component, but that doesn't affect it either. Is there a way to keep the fab defined within the detail component, but have it still be fixed relative to the window?

Solution

  • Look for something applying a CSS transform up the chain. In my case I was applying a transform via Angular animations. Apparently transform breaks position:fixed. Why does `transform` break `position: fixed`?

    I hope I can figure out how to make this work, now.