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.