Bring Calcite Components to Front/Top

[DrewNemecekIp]

Hello. I am designing a UI with the Calcite Design System (2.6) and the JavaScript Maps SDK (4.29).

I am using modals as data entry forms in the shell's modals slot. I am using alerts in the alerts slot, and I also have a loader in the body outside of the shell. Below is the basic pattern with all irrelevant code removed.

<calcite-loader 
  label="Loading...">
</calcite-loader>
<calcite-shell content-behind hidden>
      <calcite-alert
        slot="alerts">
      </calcite-alert>
      <calcite-modal 
        slot="modals">
      </calcite-modal>
</calcite-shell>

The issue I am facing is that I cannot get the the alert to appear in front of the modal when the modal is in the modals slot. When the modal is not in the modals slot, the alert appears in front of the modal. 

Further, regardless of where I put the modal and the loader, I cannot get the loader to pop up in front of any components.

I have tried using z-index in the following manner:

calcite-loader {
      position: relative;
      z-index: 100;
    }

However, that does not work either. Is there a suggested pattern for accomplishing this, or is there some property I am missing?

[MattDriscoll · Accepted solution]

Hi @DrewNemecekIp, I think we have an issue to address what you are seeing. Does this sound correct? https://github.com/Esri/calcite-design-system/issues/6818

There is also a workaround noted here: https://codepen.io/mac_and_cheese/pen/WNBNEWB?editors=1000

[DrewNemecekIp]

@MattDriscoll, thank you for pointing me in the right direction. I had to redesign my modals, but this worked!