There are two factors that determine what shows up in front like you already pointed out:
- Z-index
- Order of the elements
If the Z-index of elements is the same then the vertical hierarchy is determined by the order of the elements from the bottom to the top.
However, with Z-index we can override this and by saying that our modal has a higher Z-index than all the other elements, it will always be on top no matter what is the order of the elements.
Hope this helps.
Also some of the elements in our UI kits have had wrong Z-indexes which should be fixed now, but feel free to point out if something does not work properly.