TextMeshPro&Button in a Panel is behind Images from another panel

Here’s the sauce:

Three (3) primary ways that Unity draws / stacks / sorts / layers / overlays stuff:

In short, as far as the Standard Rendering Pipeline,

  1. The default 3D Renderers draw stuff according to Z depth - distance from camera.

  2. SpriteRenderers draw according to their Sorting Layer and Sorting Depth properties

  3. UI Canvas Renderers draw in linear transform sequence, like a stack of papers

If you find that you need to mix and match items using these different ways of rendering, and have them appear in ways they are not initially designed for, you need to:

  • identify what you are using
  • search online for the combination of things you are doing and how to to achieve what you want.

There may be more than one solution to try.

For instance, you may even use multiple co-located cameras to more-explicitly control apparent draw ordering.

Additional reading in the official docs:

And SortingGroups can also be extremely helpful in certain circumstances:

Other rendering pipelines may have other ways of layering (HDRP and URP). Go see the latest docs for details.

There’s lots of third party open source packages available as well, such as this:

This might also be useful to you designing UI:

Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

1 Like