Z-Index Hierarchy Showcase

This page demonstrates the z-index management system that ensures proper stacking order for all overlay components. Test the different scenarios to see how overlays interact with each other.

⚠️ Important: The z-index values are managed centrally in 00zindex.ts. Never use arbitrary z-index values in components - always import and use the predefined layers.

Z-Index Layer Stack (Top to Bottom)

Base Content z-index: auto

Fixed Navigation z-index: 10-250

Context Menus & WYSIWYG z-index: 4000-4500

Toast Notifications z-index: 5000

Dropdown Test

{ if (e.detail.value?.payload === 'toast') { DeesToast.createAndShow({ message: 'Toast appears above dropdown!', type: 'success' }); } }} >

Context Menu Test

{ DeesContextmenu.openContextMenuWithOptions(e, [ { name: 'Show Toast', iconName: 'bell', action: async () => { DeesToast.createAndShow({ message: 'Toast from context menu!', type: 'info' }); }}, { divider: true }, { name: 'Item 2', iconName: 'check', action: async () => {} }, { name: 'Item 3', iconName: 'copy', action: async () => {} }, ]); }}> Right-click here for context menu

Toast Notification

{ DeesToast.createAndShow({ message: 'I appear on top of everything!', type: 'success' }); }}>Show Toast

This tests the most common z-index conflict scenario.

{ const modal = await DeesModal.createAndShow({ heading: 'Modal with Dropdown', width: 'medium', showHelpButton: true, onHelp: async () => { DeesToast.createAndShow({ message: 'Help requested! Toast appears above modal.', type: 'info' }); }, content: html`

The dropdown below should appear above this modal:

You can also right-click anywhere in this modal to test context menus.

`, menuOptions: [ { name: 'Cancel', action: async (modal) => modal.destroy() }, { name: 'Save', action: async (modal) => modal.destroy() } ] }); // Add context menu to modal content const modalContent = modal.shadowRoot.querySelector('.modal .content'); if (modalContent) { modalContent.addEventListener('contextmenu', async (e: MouseEvent) => { DeesContextmenu.openContextMenuWithOptions(e, [ { name: 'Context menu in modal', iconName: 'check', action: async () => {} }, { divider: true }, { name: 'Show Toast', iconName: 'bell', action: async () => { DeesToast.createAndShow({ message: 'Toast from modal context menu!', type: 'warning' }); }} ]); }); } }}>Open Modal with Dropdown

This creates a complex scenario with multiple overlays to test the complete hierarchy.

{ // Show base modal const modal1 = await DeesModal.createAndShow({ heading: 'Base Modal', width: 'large', content: html`

Level 1: Modal

This is the base modal. Try the following:

Open the dropdown below
Right-click for context menu
Click "Show Second Modal" to stack modals

{ if (e.detail.value?.payload === 'toast') { DeesToast.createAndShow({ message: 'Toast triggered from dropdown in modal!', type: 'success' }); } }} >

{ const modal2 = await DeesModal.createAndShow({ heading: 'Second Modal', width: 'small', content: html`

Level 2: Stacked Modal

This modal appears on top of the first one.

The dropdown here should still work:

`, menuOptions: [ { name: 'Close', action: async (modal) => modal.destroy() } ] }); }}>Show Second Modal

`, menuOptions: [ { name: 'Close All', action: async (modal) => { modal.destroy(); // Also show a toast DeesToast.createAndShow({ message: 'All modals closed!', type: 'info' }); }} ] }); }}>Start Complex Stack Test

Profile dropdowns and similar UI elements use the dropdown z-index layer.

{ DeesToast.createAndShow({ message: 'Profile action triggered!', type: 'success' }); }}, { divider: true }, { name: 'Settings', iconName: 'settings', action: async () => {} }, { name: 'Logout', iconName: 'logOut', action: async () => {} } ]} >

Multiple Toasts

{ DeesToast.createAndShow({ message: 'First toast', type: 'info' }); setTimeout(() => { DeesToast.createAndShow({ message: 'Second toast', type: 'warning' }); }, 500); setTimeout(() => { DeesToast.createAndShow({ message: 'Third toast', type: 'success' }); }, 1000); }}>Show Multiple Toasts

Fullscreen Modal

{ await DeesModal.createAndShow({ heading: 'Fullscreen Modal Test', width: 'fullscreen', content: html`

Even in fullscreen, overlays should work properly:

`, menuOptions: [ { name: 'Exit Fullscreen', action: async (modal) => modal.destroy() } ] }); }}>Open Fullscreen

Best Practices:

Always use the predefined z-index values from 00zindex.ts
Never use arbitrary z-index values like z-index: 9999
When creating new overlay components, choose the appropriate layer
Test overlay interactions, especially dropdowns in modals
Remember that toasts should always be on top

Import Example:

import { zIndexLayers } from './00zindex.js';

// In your component styles:
z-index: \${zIndexLayers.overlay.modal};