title: How can I position Position MatSnackBar module in Angular?
body: <p>I am trying to position the <code>MatSnackbar</code> module to appear at the top of my page.</p>
  
  <p>I have tried using the <code>config</code> to add <code>customclass</code>. Here is my code:</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>let config = new MatSnackBarConfig();
  config.duration = 50000;
  config.panelClass = ['red-snackbar']
  this.snackBar.open("Please fill all the details before proceeding.", null, config);
  </code></pre>
  
  <p><strong>.css</strong></p>
  
  <pre><code>.red-snackbar{
      position: absolute !important;
      top: 54px;
  }
  </code></pre>
  
  <p>But it is not working. Is it possible to re-position the MatSnackbar?</p>