Well, the first approach is first clicked card gets the highest precedence.
Suppose, you have card A, B.
You click A, then B. Then, card A will overlap card B.
Now if you close A and reopen cardA, then you actually clicked cardA later than cardB. Hence, cardB overlaps cardA.
This is what first clicked card appearing first implies.
If you want cardA to always overlap cardB, use appraoch #3.
However, if you want whatever card you clicked to take the highest precedence, then I have to add another implementation. It is doable though, but I won’t be doing it now.
I will tell you the approach I’ll take, though. This will give you a chance to implement it yourself or find a better way.
Here are things that needs to be done:
- maintain highest z-index
- When a card is clicked
- if the card has the highest z-index, then do nothing.
- else, update highest z-index and give it to the selected card.
The highest z-index will eventually overflow, but I think no one will ever click that much.
P.S Your method probably won’t work because if every element had fixed z-index, then one that appears first in html will take precedence. This works when you have just 2 cards, but imagine the same more cards. I might be wrong, but just try it out.