Toast messages occluded by page elements such as text boxes

**I'm submitting a ...**
[x] bug report
[ ] feature request

**Current behavior:**
When firing a toast message, some page elements are not covered properly by the toast. Instead, those elements cover the message!
In the example above, the elements are not set to unusual z-index values or anything.

**Expected behavior:**
The Toast message, since it is ephemeral, should cover just about everything. I think it should have some transparency in it's backdrop, which should help if anything underneath it needs to be seen.

**Steps to reproduce:**
In your browser console try sending a toast on a page with PWA elements:

```
window.Capacitor.Plugins.Toast.show({ text: "Here's a long Toast message. You can see under me, but if you scroll the page, some elements cover me up!", duration: '10000'}).then();
```

Then attempt to scroll elements past it, such as form input elements (like those pictured above).

**Potential solution**
Increase Toast Z-index?