+
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
+
+
+ Dropdown Overlays
+ z-index: 1999-2000
+
+
+ Modal Dialogs
+ z-index: 2999-3000
+
+
+ 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
+
+
+
+ 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};
+
+