Why does unity shows UI button shows on top of background in game view whereas they are far from each other in scene view?

Question

In the below image, you can see that the scene view and game view are different. The scene view just has the UI button but the game view shows the background image. In the scene view, the background image is so tiny, and is in the lower left corner. The button and the background is far in the scene. Also, in the main camera, I see the background but no button. How and why does game view shows the button on top of the background? What is the logic behind this?

how and why does game view shows the button on top of the background?

Answer 1

This is the normal expected behavior.

You are using a Screenspace Overlay Canvas which is in pixel space coordinates while the rest of your app is in Unity units (usually 1 per meter).

=> So for example if your GameView is 600x800 pixels in order to place a button with dimensions 100x60 at the bottom right it will have a position coordinate somewhat like 550x30 which is of course way out of the dimensions of the rest of your app content -> The canvas just appears huge and UI elements far apart in the Scene View.

To see your "normal" content simply double click on an item in your Hierarchy View and it will zoom in on it.