Re-work component z-index relational layers

Most everything should be using z-index (which is how things are layered in CSS) and it appears we have the following hierarchy based on the following code: https://github.com/dequelabs/cauldron/blob/61642fd9d86c35336377f35ce6f84a7961a373ec/packages/styles/variables.css#L115-L131

## Current Stacking Order (Highest → Lowest)

- Skip Container & Drawer
- Top Bar
- Critical Action Items (Toast - Action Needed)
- Scrim (Action Needed)
- Tooltips
- Dialog
- Dialog Scrim
- Navigation Components (Top Nav & Side Bar)
- Overlays & Notifications (Loader & Toast)
- Scrim (Default)
- Listbox

## Needed Stacking Order

We really need to flatten our layering to minimize [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context) issues and limit how things are layered in the UI to at most 3 different layers:

1. Top most layer
- Dialogs
- Tooltips
- Overlays
- Menus
- Any other ui elements that are "floating"
2. Middle layer
- Scrim
- SkipLinks
- TopBar
- Any other elements that need to overlay content (not in the top layer)
3. Everything else