Usual Canvas Sorting order is not kept when setting directly from script

Usually in the canvas, the items are sorted with the items that are “below - literally” in the hierarchy being drawn on top. (Or am i wrong?) eg. a child object will be shown above the parent and also a item that is not a child but simply ordered below in the canvas will be shown above.

In my case I have a title that i wanted showing on top at the start and then go behind another panel later. As shown in the picture. The Menu is the main canvas that is in order set to 100. The Title (placed above the said panel) has a canvas component with an order larger than 100 initially to appear on top of the panel that would usually be drawn over it.
I eventually change the title order back to 100 (matching the other panel) but it still appears above the panel despite being “above” it in the hierarchy with the same sorting order.

I want to know why this is happening.

From my own experience, multiple canvas that are on the same sorting layer will not render in the order they are placed on the hierarchy. Multiple graphics places inside the same canvas will render in their hierarchy order.

I think you have two options then

  • Instead of setting the same order, set the background one on a lesser order or the foreground on a greater order. These do not have a physical meaning so I like keeping mine simple (0, 1, 2, 3, -1, -2, -3, etc).
  • Remove the nested canvases. Some or all will depend on your complexity. Nested canvases seem to improve performance on very complex UIs, but there is no need to keep each graphic in a Canvas.

What do you think?