Z-Index explained

Applies to: VisualSP
Print Friendly, PDF & Email

Understanding the z-index property within the walk-through builder is pivotal for controlling the vertical stacking order of overlapping elements. In this support article, we'll unravel the significance of the z-index property, exploring how it influences the visibility and layering of elements in your walk-throughs. Whether you're new to the concept or seeking to refine your walk-through designs, this guide will provide you with valuable insights into leveraging the z-index property effectively. Let's delve into the intricacies of managing element stacking order to optimize the visual hierarchy in your walk-throughs.

The z-index property in the walk-through builder controls the vertical stacking order of elements that overlap.

The higher the z-index the closer to the front it will appear. If your walkthrough bubble appears below an element in your application, put a large number, such as 1000000, in the Z-index field under Advanced Properties in the Walk-through editor.

This will stack the walk-through bubble above the element. You are more likely to come across this need with elements that appear in modal format (a dialog box/popup window that is displayed on top of the current page).

If you find that your walk-through is skipping steps, and you are selecting elements that are in a pop-up window, try adding a delay to the step that is being skipped. If the target element a step is associated with hasn't had time to load, the walk-through will skip that step. Setting a delay will solve that problem.

Updated on January 9, 2024

Related Articles