How to order the render of planes in the same depth (distance to camera)?

I’m developing a card game, but got stuck on this. I’m making the players hand, the camera is centered above and all the cards are rendered at 0 Z, but in the hand the cards overlaps, the rightmost card on top to the second rightmost and so on, not only that but when hovering I want the hovered card to be drawn over the others, I could use widgets to display the cards on hand and actors for the cards on game, but I really want to be fully actors, so I can rotate cards in hand and get reflections and so on.

Right now the card is a actor with a widget component that displays the card face, and a box collision to fire events like on begin/end cursor over. Firing that events makes the widget components move closer/farther from the camera.

The issue is, the cards all at 0 Z renders with no logic, the 4 card being on top of the others, the 1 on top of the 2 on top of the 3. Slightly changing the Z have no effects, values like 0.1 to the first card 0.2 to second or even 1 2 … 5 have no effect, when using a Z difference of ~3 or more it works, but it’s ugly, and it’s visible that cards are closer, and will be more visible with more cards. Using a for loop to render cards makes the first spawned actor to be on top of the others and gradually, the reverse of what I expected, I expected the last created/drawn card to be on top of the others.

I tried using custom depth stencils too, but not only it looks like overkill, but it’s strange when working with planes, and too complicated.

Anyway to define the order of the cards? Anyway to make small differences on Z matter? Should I use anther method for the cards?

Here’s a screenshot: