z-index for Toast Notifications

Q: z-index for Toast Notifications

## Toast Notification z-index Strategy Toast notifications (also called snackbars or alerts) should be visible above almost all other UI elements. They typically only yield to tooltips in the z-index hierarchy. ### Recommended z-index Position css :root { --z-dropdown: 1000; --z-sticky: 1020; --z-overlay: 1040; --z-modal: 1050; --z-popover: 1060; --z-toast: 1080; /* above modals */ --z-tooltip: 1090; /* above toasts */ } ### Implementation css .toast-container { posit

Design the z-index layer for toast notifications so they always appear above other UI elements including modals and popovers.

Common Patterns

Detailed Explanation

Toast Notification z-index Strategy

Toast notifications (also called snackbars or alerts) should be visible above almost all other UI elements. They typically only yield to tooltips in the z-index hierarchy.

Recommended z-index Position

:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-toast: 1080;     /* above modals */
  --z-tooltip: 1090;   /* above toasts */
}

Implementation

.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none; /* allow clicking through empty space */
}

.toast {
  pointer-events: auto; /* re-enable clicks on the toast itself */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 360px;
}

Why Toasts Need High z-index

Above modals: Users need to see success/error feedback even while a modal is open. An action inside a modal (like form submission) might trigger a toast.
Above overlays: If a loading overlay covers the page, toasts should still be visible so users know something happened.
Above sticky headers: Navigation headers are common, and toasts should never be hidden behind them.

Stacking Multiple Toasts

/* Each toast gets the same z-index — they stack by DOM order */
.toast:nth-child(1) { /* bottom toast */ }
.toast:nth-child(2) { /* appears above */ }
/* No need for different z-index values within the container */

Framework Integration

React: Use a ToastProvider at the app root that renders a portal
Vue: Use Teleport to move the toast container to the body
Angular: Use CDK Overlay or a dedicated toast service

Important Considerations

Use pointer-events: none on the container and pointer-events: auto on individual toasts
Place the toast container as a direct child of <body> to avoid stacking context traps
Test with modals open, sticky headers visible, and multiple toasts stacked

Use Case

When implementing a toast notification system that needs to remain visible regardless of what other UI elements (modals, dropdowns, overlays) are currently displayed.

Try It — z-index Manager

Open full tool →