title: How to make a Angular Material Dialog component stay on top of other components
body: <p>My app is set up to use a vertical Navigation Bar on the left of the screen and a Home Component in the <code>&lt;router-outlet&gt;</code> to the right of it.
  When I open a Dialog Component in the Home Component part of it is hidden by the Navigation Bar which is on top of the Dialog Component. I’d like to keep the position of the Dialog Component relative to the whole screen not just to the Home Component in <code>&lt;router-outlet&gt;</code>.
  The Navigation Bar does have CSS:</p>
  
  <pre><code>.main-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
  }
  </code></pre>