🧭 Z-Index Priority Guide

To avoid z-index conflicts between components (dropdowns, tables, modals, etc.), follow this layered scale:

| Layer Name | Purpose / Usage | Suggested z-index | |----------------|--------------------|------------------------| | Base Content | Static page elements, tables, layouts, text | 0 – 1 | | Low-Priority Interactive UI | Table column resize handles, hover highlights, minor controls | 5 – 9 | | Dropdowns / Menus | Standard dropdowns, context menus, small popovers | 10 – 20 | | Modals / Panels / Overlays | Blocking dialogs, side panels, full-screen overlays | 100+ | | Tooltips / Priority Overlays | Tooltips, alerts, keytips, elements that must always appear on top | 200+ |

Tip: Use consistent values across your SPFx projects to prevent “z-index wars.” When possible, create a shared constant or enum so that layers are easy to maintain.

// z-index scale (project standard): // 0-1: base content // 5-9: interactive but low-priority UI (e.g., resize handles) // 10-20: dropdowns / menus // 100+: modals / overlays // 200+: tooltips / highest priority