Why is text on my 2D prefab instances on top, even when the prefab is below other objects?

Hi,
I am having a problem implementing a prefab for playing-cards for a 2D game. I’ve been looking online for a solution for some time now but can’t find one.

My problem:
I created a card Prefab that contains a sprite and TMP Text GOs on a canvas (world space [Main Camera]) as a child of the sprite.
Card (Empty GameObject) → CardBody (Sprite)
→ Canvas (Canvas) → TMP Text x3

Using the prefab works fine. The text appears in front of the card sprite. Now, when I stack several prefab cards I expected to only see the elements of the top card, as the card below are… well, below the topmost card. However when multiple cards are overlapping, the text of all cards is on top of all sprites.

I made sure every object is in Z position 0
I tried playing around with the canvas settings and sorting layers
I tried modifying the prefab hierarchy

but with no success.

Is there a way to have all contents of a prefab be on one layerso that an instance of that prefab (including all of its children) can be on top of a second instance?
Or in other words, how do I achieve that all elements of a prefab respect the prefabs parent layer?

By default SpriteRenderer and CanvasRenderer components use different methodologies for layering and ordering.

It is always best to stick with one or the other, but they can be mixed. Look up “mixing sprites with UI” and see what is involved. Generally it involves using a different shader for one side or the other.

I’m gonna try that. Thank you!