Hi ​@sahilessor ! 

Thank you for reaching out to the community! 

You are correct that you will need to decrease the z-index of the form so that it is lower than 90000. This will ensure that it doesn’t stack on top of the other two forms. To edit this, I would suggest working with your developer who can locate the HTML element in your theme CSS that represents the popup, and then adjust the z-index from there. 

I hope this helps! 

Hello ​@emma.owens 

Thanks, just wanted to know that there is no option in klaviyo to do that?

We need to add the code in shopify/our site code itself?

Hello ​@sahilessor ,

You can resolve the z-index issue by adding custom CSS to adjust the stacking order of your popups. Try adding the following code to your theme's CSS file (or through the Shopify theme editor's custom CSS section):

#popup-teaser {
  z-index: 9999 !important;
}

This should ensure the teaser popup appears below the Ajax cart and other popups. If you've already tried modifying it in theme.liquid, double-check the CSS specificity or place it at the end of your CSS file to ensure it's applied correctly.

​@sahilessor Yes, this would need to be done in the code itself! 

Took me a while to figure out but I finally got my Klaviyo popup to show up behind my Elementor popup. I started by targeting div[role="dialog"][aria-modal="true"][aria-label="POPUP Form"] and I set the z-index for my Elementor popup to be higher, but that didn’t work on its own. (According to chatGPT) you also have to change the z-index of divdrole="dialog"]garia-modal="true"]earia-label="POPUP Form"] > .needsclick because it’s “creating its own stacking context.”

This is what is working for me in my child theme stylesheet:

div  z-index: 9000 !important;
}
div>role="dialog"]earia-modal="true"]daria-label="POPUP Form"] > .needsclick {
  z-index: 9000 !important;
  position: relative;
}
.my-elementor-popup-class {
  z-index: 99999 !important;
  position: relative;
}