unity – Isometric Tilemap is blocking UI elements


I’m using Unity 2019.4.6f1, and I’m working on Isometric Tilemaps.

The hierarchy is like this:

Hierarchy

The VillageScreen is a Canvas, img-bg is an UI Image, the two Panels are UI Panels, and the Grid and two Tilemaps are the isometric tilemaps. The problem is, the Grid & Tilemap is blocking all other UI elements, and it seems to be always on top, no matter how I set the Z value.

The Grid setting is:

Grid Settings

And the Panel setting is:

Panel Settings

My question is: How do I put the UI elements ABOVE the Tilemap?

p.s. the UI button is clickable, it just cannot be displayed properly.

UPDATE: Added a mockup screen – Black circles are buttons, while Red texts are UI texts for displaying scores.

Mockup