title: Z-Index NOT working on Angular's Material Dialog
body: <p>Bug:</p>
  
  <p>Z-Index NOT working on Material Dialog</p>
  
  <p>What is the expected behavior?</p>
  
  <p>Z-Index should work on Material Dialog or Dialog should be on top of everything else.</p>
  
  <p>What is the current behavior?</p>
  
  <p>Material Dialog gets covered by select's options that are below.</p>
  
  <p>What are the steps to reproduce?
  <a href="https://stackblitz.com/edit/angular-gsa8kr-rkss7t?file=app/dialog-overview-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-gsa8kr-rkss7t?file=app/dialog-overview-example.html</a></p>
  
  <ol>
  <li>Type text.</li>
  <li>Select dropdown.</li>
  </ol>
  
  <p>Screenshots: <a href="https://postimg.cc/gallery/2i3tc2sbc/" rel="nofollow noreferrer">https://postimg.cc/gallery/2i3tc2sbc/</a></p>
  
  <p>Is there anything else we should know?</p>
  
  <p>Tried CSS fixes:</p>
  
  <pre><code>.modal__content,dialog-layout,mat-dialog-container,.mat-dialog-container,#cdk-overlay-0,.cdk-overlay-pane {
      z-index: 9999 !important;
  }
  </code></pre>
  
  <p>NONE of that worked.</p>