feat(overlay) use popover in overlay service

projects/igniteui-angular/core/src/core/styles/components/overlay/_overlay-theme.scss

@@ -20,8 +20,23 @@
         background: transparent;
         transition: background .25s $in-out-quad;
         pointer-events: none;
-        z-index: 10005;
         box-sizing: content-box;
+
+        // Override browser's default popover styles to maintain our custom positioning
+        &[popover] {
+            // Reset popover defaults to use our positioning with !important to override UA styles
+            position: fixed !important;
+            inset: 0 !important;
+            margin: 0 !important;
+            border: 0 !important;
+            padding: 0 !important;
+            width: auto !important;
+            height: auto !important;
+            max-width: none !important;
+            max-height: none !important;
+            overflow: visible !important;
+            background: transparent !important;
+        }
     }
 
     %overlay-wrapper--modal {
@@ -79,6 +94,5 @@
         pointer-events: none;
         overflow: hidden;
         appearance: none;
-        z-index: -1;
     }
 }

projects/igniteui-angular/core/src/services/overlay/overlay.ts

@@ -420,6 +420,15 @@ export class IgxOverlayService implements OnDestroy {
         this.updateSize(info);
         const openAnimation = info.settings.positionStrategy.settings.openAnimation;
         const closeAnimation = info.settings.positionStrategy.settings.closeAnimation;
+        // Show the overlay using Popover API BEFORE positioning
+        // This ensures the element is in the top layer when position calculations happen
+        if (info.wrapperElement && info.wrapperElement.isConnected && typeof info.wrapperElement.showPopover === 'function') {
+            try {
+                info.wrapperElement.showPopover();
+            } catch (_) {
+                // Popover API call failed, element may already be showing
+            }
+        }
         info.settings.positionStrategy.position(
             info.elementRef.nativeElement.parentElement,
             { width: info.initialSize.width, height: info.initialSize.height },
@@ -646,6 +655,8 @@ export class IgxOverlayService implements OnDestroy {
     private getWrapperElement(): HTMLElement {
         const wrapper: HTMLElement = this._document.createElement('div');
         wrapper.classList.add('igx-overlay__wrapper');
+        // Use Popover API to place element in top layer, eliminating need for z-index
+        wrapper.setAttribute('popover', 'manual');
         return wrapper;
     }
 
@@ -700,6 +711,16 @@ export class IgxOverlayService implements OnDestroy {
         if (info.wrapperElement) {
             // to eliminate flickering show the element just before animation start
             info.wrapperElement.style.visibility = 'hidden';
+            // Hide from popover top layer if element is connected, showing, and API is available
+            if (info.wrapperElement.isConnected &&
+                typeof info.wrapperElement.hidePopover === 'function' &&
+                info.wrapperElement.matches(':popover-open')) {
+                try {
+                    info.wrapperElement.hidePopover();
+                } catch (_) {
+                    // Hide failed, element may not be in popover state
+                }
+            }
         }
         if (!info.closeAnimationDetaching) {
             this.closed.emit({ id: info.id, componentRef: info.componentRef, event: info.event });