title: How to show several snackbar without overlapping
body: <h2>Can I display multiple messages on the screen without overlapping others with snackBar?</h2>
  
  <p>I have a service to display messages in my application, but the problem is that when more than one event occurs that I need to display the message on the screen, the message is overwritten by the last message to be displayed.</p>
  
  <p>I need a good way of not overlapping my messages and displaying one underneath the other without replacing the others.</p>
  
  <p>I would like it to work the same way a Toast works, displaying one message underneath the other without overlapping.</p>
  
  <p>The way I'm doing it below, only displays one message at a time on the screen.</p>
  
  <p><strong>snack-message.service.ts:</strong></p>
  
  <pre><code>  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
    verticalPosition: MatSnackBarVerticalPosition = 'top';
  
    constructor(
      public snackBar: MatSnackBar){}
  
    showMessage(message: string) {
      this.snackBar.open(message, 'Close', {
        duration: 5000,
        horizontalPosition: this.horizontalPosition,
        verticalPosition: this.verticalPosition,
      });
    }
  </code></pre>