force z-index on UI element without hierarchy changes?

Is there any way to FORCE the z-index on a UI element without messing with the hierarchy?

I have a small tree of elements like this:

  • A

  • a1

  • a2

  • B

  • b1

  • b2

  • C

  • c1

  • c2

I I need to make sure that elements a2, b2 and c2 are always on top of everything else (tooltips). Because this whole thing is dynamically placed (player cursor position), I need to keep the hierarchy intact.

It should be possible to override the default hierachy based order for some elements by creating a nested canvas and setting either sorting layer or order in layer for that nested canvas.

1 Like

You mean having a canvas as a parent of a2, bc2, c2, like:

  • A

  • a1

  • canvas

  • a2

?

Yes, I tried it:

  • Main canvas (Canvas component)
    • A Sub canvas (another Canvas component)
      • a1
      • a2
    • B
      • b1
      • b2

Main canvas component appears like this in the Inspector:

On A Sub canvas, you place another Canvas component whose fields will appear slightly differently:

This way you can override the Sort Order. From testing, setting it >= main canvas Order in Layer will show A and its children above B and its children, instead of below following hiearchy order.

But behavior when indices are equal may be uncertain so I’d recommended setting Sort Order to at least main canvas Order in Layer + 1.