title: Sticky MdToolbar inside MdSidenavLayout
body: <p>I have an Angular 2 Material app that uses the <code>&lt;md-sidenav-layout&gt;</code> with an <code>&lt;md-toolbar&gt;</code> inside.</p>
  
  <pre><code>&lt;md-sidenav-layout&gt;
    &lt;md-sidenav #sidenav mode="side" class="app-sidenav" opened="true"&gt;
      sidenav content
    &lt;/md-sidenav&gt;
  
    &lt;md-toolbar color="primary" class="toolbar"&gt;
      toolbar content
    &lt;/md-toolbar&gt;
  &lt;/md-sidenav-layout&gt;
  </code></pre>
  
  <p>And it looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/qP3BB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qP3BB.png" alt="enter image description here"></a></p>
  
  <p>What I'm trying to do is have the toolbar stick to the top so it doesn't move when you scroll down. This is to make it consistent with the sidenav and its title. But currently it doesn't work.</p>
  
  <p><a href="https://i.stack.imgur.com/xjuUz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xjuUz.png" alt="enter image description here"></a></p>
  
  <p>I though that adding <code>position: fixed; top: 0</code> would do the trick but it doesn't</p>
  
  <pre><code>/* Doesn't work */
  .toolbar {
    position: fixed;
    top: 0;
  }
  </code></pre>
  
  <p>From what I read from <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" rel="nofollow noreferrer">MDN: position</a> and <a href="https://stackoverflow.com/a/14732712/2587435">this SO post</a> about <code>position: fixed</code>, it seems it won't work if the parent uses a <code>transform</code>. And I'm pretty sure that's what the <code>md-sidenav-layout</code> uses for transition when the sidenav is toggled. I've tested the <code>position: fixed; top: 0</code> on a simple static page, and it works fine.</p>
  
  <p>I could try to take the toolbar out of the context of the <code>md-sidenav-layout</code>, but it's what handles the animation and transition to make the toolbar and sidenav consistent when you toggle the sidenav.</p>
  
  <p><a href="https://i.stack.imgur.com/iGWHB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iGWHB.png" alt="enter image description here"></a></p>
  
  <p>My CSS-fu isn't strong. Maybe I'm missing something. Any body got any ideas on how to fix this? Any work-arounds are welcome at this point, as long as I get the desired effect.</p>
  
  <p>Here is the <a href="http://plnkr.co/edit/Kx1ubWNqXGE80U70mN7y?p=preview" rel="nofollow noreferrer"><strong>Plunker</strong></a>.</p>