Problem:

Sometimes an element e.g. a modal or popup within an application when opened, covers a step or a launcher. When it happens, the solution is to increase the z-index value of the step or the launcher to be higher than the element covering it. But finding the right value of the element that is covering the step or launcher can be difficult sometimes. Here is how to find the right z-index value.

Instructions:

1) Open the element and launch the topic

Open the element that covers the step or launcher when the element is open. Make sure that the step is active and is now displaying behind the element.

2) Open the browser developer console

On the same page, open the browser developer console. You can do this by right-clicking on the web page and selecting the "Inspect Element" from the context menu. Switch to the "Console" tab within the developer console.

3) Paste the code snippet

Paste the code snippet below in the empty field of the "Console" tab

function maxZIndex() {

    return Array.from(document.querySelectorAll('body *'))
        .map(a => parseFloat(window.getComputedStyle(a).zIndex))
        .filter(a => !isNaN(a))
        .sort()
        .pop();
}
maxZIndex('body');