update z-index use

readme.hints.md

@@ -513,4 +513,95 @@ Completed comprehensive refactoring to ensure clean, maintainable code with sepa
 The refactoring follows the principles in instructions.md:
 - Uses static templates with manual DOM operations
 - Maintains separated concerns in different classes
-- Results in clean, concise, and manageable code
+- Results in clean, concise, and manageable code
+
+## Z-Index Management System (2025-12-24)
+
+A comprehensive z-index management system has been implemented to fix overlay stacking conflicts:
+
+### The Problem:
+- Modals were hiding dropdown overlays
+- Context menus appeared behind modals
+- Inconsistent z-index values across components
+- No clear hierarchy for overlay stacking
+
+### The Solution:
+
+#### 1. Central Z-Index Constants (`00zindex.ts`):
+Created a centralized file defining all z-index layers:
+
+```typescript
+export const zIndexLayers = {
+  // Base layer: Regular content
+  base: {
+    content: 'auto',
+    inputElements: 1,
+  },
+  // Fixed UI elements
+  fixed: {
+    appBar: 10,
+    sideMenu: 10,
+    mobileNav: 250,
+  },
+  // Overlay backdrops
+  backdrop: {
+    dropdown: 1999,
+    modal: 2999,
+    contextMenu: 3999,
+  },
+  // Interactive overlays
+  overlay: {
+    dropdown: 2000,     // Dropdowns and select menus
+    modal: 3000,        // Modal dialogs
+    contextMenu: 4000,  // Context menus and tooltips
+    toast: 5000,        // Toast notifications
+  },
+  // Special cases
+  modalDropdown: 3500,    // Dropdowns inside modals
+  wysiwygMenus: 4500,     // Editor formatting menus
+}
+```
+
+#### 2. Updated Components:
+- **dees-modal**: Changed from 2000 to 3000
+- **dees-windowlayer**: Changed from 200-201 to 1999-2000 (used by dropdowns)
+- **dees-contextmenu**: Changed from 10000 to 4000
+- **dees-toast**: Changed from 10000 to 5000
+- **wysiwyg menus**: Changed from 10000 to 4500
+- **dees-appui-profiledropdown**: Uses new dropdown z-index (2000)
+
+#### 3. Stacking Order (bottom to top):
+1. Regular page content (auto)
+2. Fixed navigation elements (10-250)
+3. Dropdown backdrop (1999)
+4. Dropdown content (2000)
+5. Modal backdrop (2999)
+6. Modal content (3000)
+7. Context menu (4000)
+8. WYSIWYG menus (4500)
+9. Toast notifications (5000)
+
+#### 4. Key Benefits:
+- Dropdowns now appear above modals
+- Context menus appear above dropdowns and modals
+- Toast notifications always appear on top
+- Consistent and predictable stacking behavior
+- Easy to adjust hierarchy by modifying central constants
+
+#### 5. Testing:
+Created `test-zindex.demo.ts` to verify stacking behavior with:
+- Modal containing dropdown
+- Context menu on modal
+- Toast notifications
+- Complex overlay combinations
+
+### Usage:
+Import and use the z-index constants in any component:
+```typescript
+import { zIndexLayers } from './00zindex.js';
+
+// In styles
+z-index: ${zIndexLayers.overlay.modal};
+```
+
+This system ensures proper stacking order for all overlay components and prevents z-index conflicts.