Overview
Suppose you notice that ProveSource notifications are blocking other important elements on your website, such as a floating cart, chat widget, or other pop-ups. In that case, you can adjust the z-index value to control their stacking order.
The z-index is a CSS property that determines the vertical stacking order of elements on a web page. An element with a higher z-index appears in front of elements with lower values.
Configuring the Z-Index in ProveSource
ProveSource allows you to customize the z-index for notifications separately on desktop and mobile devices. You can adjust these settings under:
Settings > Notifications > Behavior
Steps to Adjust the Z-Index:
Navigate to Settings in the left-hand menu.
Click the Notifications tab.
Locate the fields for Z-Index (Desktop) and Z-Index (Mobile).
Enter a custom z-index value:
Higher values (e.g., 99) bring the notification to the front.
Lower values (e.g., 10) push the notification behind other elements.
Click Save Changes to apply your settings.
Best Practices
If notifications are blocking important elements like a floating cart or chat widget, try lowering the z-index value (e.g., setting it to 1000 or lower).
If notifications are hidden behind other elements, increase the z-index (e.g., 9999 or higher).
Test the changes on both desktop and mobile to ensure notifications display correctly without interfering with other website components.
By fine-tuning the z-index settings, you can ensure ProveSource notifications integrate smoothly with your website’s layout, providing a seamless experience for visitors.