Set the Display Order of Your Popups

When you have multiple popups on a page, you might notice that some appear on top of others. This happens because each popup has a stacking order, determining which is displayed in front. This stacking order is controlled by a CSS property called z-index. By adjusting this value, you can ensure that the most important popup appears above the rest.

Control Which Popup Shows First

In our popup builder, every popup is assigned a default z-index value of 99999, which places it above most other elements on the page. However, when multiple popups are present, they all share the same default value, making it difficult to control which one should be on top.

With the Ordering (z-index) option, you can manually set the stacking order of your popups. A higher value means the popup will appear in front of those with a lower value. To adjust the ordering of each popup, follow the steps below:

1. Edit the popup you want to adjust the stacking order
2. Go to the Advanced tab
3. Find the Ordering (z-index) option and set a Value – Enter a higher number to bring the popup to the front or a lower number to place it behind others.
4. Save and Test – Preview your page to see how the popups stack up and make adjustments if needed.