Popup Z-Index - Please Answer for Current Version of EsriMaPS

Question

Hello,

I'm trying to set the Z-Index on the popup so that it shows above other elements. I can do it when I "inspect" the rendered HTML, however even after I override the classes shown in that screenshot, the the popup isn't responding to my additional style.

Can someone please post a working example of achieving this, using the current version of EsriMaps?

Thanks.

Capture.PNG

AnneMarieDubois_2-1714152438769.png

PhilipWeeks · Answer

I've been trying to work this out too.  I have text links and buttons I want to appear over the map, but when the pop-up appears I'd like it to appear over the text and buttons but I have not gotten it to honor the z-index.  I can't tell if it just doesn't work the way I'd think or if I have the syntax wrong, or if it's some div hierarchy malarkey.

I'm trying to adjust it by setting the z-index of the .esri-popup__main-container css element.  I've tried it with the text link div as a sibling of the map canvas div and as a child in addition to where it was originally, just above the main container the map canvas was inside.  I think that'd be an Aunt/Uncle?

Anyway, it feels like no matter what I do the pop-up is always at the same z-index of the map canvas.  Maybe the z-index only works internally for the position of API elements from other API elements?  Is there maybe a simple example of using a z-index to add an element that's above the map but below the pop-up?