I am working on an application that implements a multi step progress bar (please see an example here). It is implemented using sass/scss as an Angular5 component.
The progress bar works great everywhere except where the component is inserted into a Kendo Grid as a Column Template. Since the progress bar rely's on z-index being set to -1 for the lines between the steps, this part of the progress bar gets hidden behind the Kendo grid.
How can the same progress bar be achieved with using only positive z-index.
I have tried changing z-index: -1 to 1 and adding z-index:2 to other parts of the scss but I have not succeeded in hiding the line between the steps on both ::before and ::after. Changing the z-index on the Kendo grid is not an option as it breaks the functionality of the grid. (Also, Kendo advises against it, see here )
As per the given example, the z-index: -1; is applied to the li::after pseudo-element, which you can increase to a higher value (for example 2).
Now, you need to increase the z-index of li::before pseudo-element to even a higher value (like 3).
Finally you need to set position: relative; to it, as z-index won't work on static elements.
Updated example here