How can I keep a UI element in the front while keeping hierarchy strict?

SO a quick run down. I am using an object which is a UI Dropdown Menu.

I have so far setup my UI elements in such a way that it is strictly hierarchical for organization.
Now my question is there anyway I can get it to display at the upfront most way or do I have to reorganize the hierarchy to force it to work. I want to keep the hierarchy the same as it just neater and easy for prefabs to workout.

I checked on another post about this issue and the solution was to drop a Canvas component on the object, however that did work visually, but none of the buttons would respond.

Attached is a picture of the current hierarchy involved as an example. 57530-capture.png

You can’t do hierachy by role under Canvases. The reason being that the order of the transforms makes up the order with which the UI elements are drawn.

back_button will be drawn before title_text.

The elements under item1_edit will be drawn after the elements of item1_dropdown.

So if things aren’t working for you, it’s probably because you are using the wrong logic for organizing your UI elements.

It’s best if you don’t drop Canvases inside Canvases. You could have Canvases in the same depth(same parent) and make sure they have different distance from the camera, if you want to keep things as they are.

Also keep in mind that if you have UI elements with nested overlapping graphics and lose pointer events in the smaller graphic, chances are it’s used up by the first graphic the pointer encounters.

I could be wrong but this sounds like what you need.

There is also a Pos Z entry in the rectTransform. This moves elements into and out of the canvas.