How to implement a way to fade screen to black? 2D objects ignore their position on the Z axis

I have a 2D game project I’m working on

I want to implement a way to fade to black in the scene, for stuff like level transitions, loading screens, etc.

I saw a way to do that by putting a black square over everything in the Z axis so it covers everything and then using it to shift from transparent to visible to hide the screen. But… Some objects just ignore it and appear above it anyway?

For example, I have my player object at Z position -0.5, the square at Z position 7 and the Camera at Z pos 10. By all means, the square should be hiding the player character, but… It doesn’t. And I don’t really know why or how to fix it.

You can use a UI Image to cover the whole screen with the canvas in overlay mode, that will pretty much bypass the whole 2D rendering and just get -well- overlay-ed on top of everything