Modal Panel & z-index value

I've been using modal panel without understanding what a z-index is. It's a CSS property that I didn't have to worry about until recently. Apparently, a z-index value in a component can affect the way components are displayed. The definition of a z-index from w3school is :

the z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order

So, if you have two named mp1 and mp2, each of which has a z-index value of 2000 and 1000 respectively (those are arbitrary numbers that I picked), when you called those two modal panels, mp1 will always display on top of mp2. You will be scratching your head as I was, if your mp2 is smaller than mp1, and trying to figure out why mp2 wasn't showing up. The reason is because of your z-index value. In using I don't think you need to specify z-index value explicitly. If you didn't specify any value for z-index and called mp2 from mp1, it'll still display properly.