Open multiple overlay components in separate `.cdk-overlay-container`s

[Matt Cheah]

Hi all, 

I'm encountering a problem where I will occasionally combine my own overlay container with a mat-dialog component and mat-snackbar component, but I like my overlay to be underneath the snackbar and over the dialog component (so the snackbar is visible but the dialog is obscured.) 

The issue here is that both Material elements are appended to the cdk-overlay-container, meaning that their effective z-index will be the same as their parent component. For me, this means that either both of my Mat elements will be underneath my overlay or above my overlay, as long as they are both children of .cdk-overlay-container.

I have been able to get around this by creating a wrapper method for the snackbar that opens the snackbar, and then removes the snackbar's parent `.cdk-global-overlay-wrapper` from `cdk-overlay-container` and appends it to the body (and also changes the positioning to fixed so it behaves the same way), but I'd much prefer a solution that uses pure CSS or at least can go into effect upon calling snackBar.open() instead of accessing the DOM after the fact. 

Is there a way to create separate .cdk-overlay-container elements for each different Mat component? or am I overlooking any other simple solution here? 
Many thanks!