[Bug]: Snackbar not positioned above content

[damyanpetev]

Which component(s) are affected?

Snackbar, Toast

Description

The snackbar (and toast) rely entirely on DOM position to appear above content, i.e. if they are not the last defined element, they appear behind their siblings.

While z-index could solve some overlapping issues, the actual solution would likely be to go with Popover API. However, that will enforce position: fixed; which is currently the default applied to the host, sure, but easily changed to absolute as well.
From what I gather, by design the snackbar should appear towards to bottom but still above toolbars/navigation (see https://m3.material.io/components/snackbar/guidelines) so to me that seems like we'd also want to place the component in a specific container (like absolute could) and that might require an additional option.

Reproduction

As seen in https://igniteui.github.io/igniteui-webcomponents/?path=/story/snackbar--positions, but with the snack moved before the buttons container.

Workaround

igc-snackbar {
    z-index: 9999;
}

Is this a regression?

No or unsure. This never worker, or I haven't tried before.

Affected versions

7.x

Browser/OS/Node environment

N/A