UI Image sorting layer?

I have two UI Images, one is a white box, one is a sprite. However, the white box blocks the whole potion sprite, since there is no such thing as sorting layer in gui.

I even tried moving the Z position of the white box. it makes no difference.

 

On the image component you can uncheck "block raycasts" then you can click through it.

 

yes, there is sorting layers for canvas... so you could either:

add two canvas, each with a different layer or
order the object differently in your hierarchy... it's bottom/up > back/front

 

The most important function of a sorting layer is that you can override render order without changing the hierarchy. I have a menu item list with image components on them and want to change their render order without changing the hierarchi.

 

you add the canvas component to the same object as your image. Then change the sorting order of the added canvas. Basically you are using the canvas component just to add sorting functionality, but it will change nothing else

 

Thank you very much, it changed my life !

 

You're a legend.

 

Yes... Yes he is...

 

Priceless bit of wisdom!

 

there are 3 buttons if I press one button it will scroll to that specific content. Or if I scroll the content to next content, it will automatically switch the button I want this function in my shop/Inventory system in canvas Unity

 

Thanks guys.

 

jesus christ. thank you

 

Thanks,
this solution works .

 

this is my friend in Jesus, right here.

 

oh it's you again

 

Still many years after your answer, this simple piece of information that I was unaware of really saved me so much time and avoided me some pretty sketchy hierarchical djenga that I was starting to try. Right after seeing your comment, tried to check that in unity and seen some little box called "Override Sorting" that I haven't noticed before, it's like a bonus layer order that I didn't knew existed. You don't have any idea how this really super simple thing that I was missing avoided so many complications in my actual project, I mean it saved me days and days, litterally.

So, thank you again. That may even be my first comment on here after all those years developping with Unity, just to tell how much this small bit of information helped me greatly on a crucial thing. It will changes so much things.

Where ever you are, have a nice day dear other human being

 

This can also be achieved by dynamically setting new\lower\higher sibling indexes on the transforms (assuming they have the same parent)

There are a handful of methods (set\set first\set last\get) that will help, i.e.

https://docs.unity3d.com/ScriptReference/Transform.SetSiblingIndex.html

It's simpler (and potentially a little more efficient) than working with multiple canvases imho.

 

i know it's late, but I simply changed the order of the UI Elements in the Hierarchy and it worked

 

Yes this will work but not for my case in which i have elements that are sorted from an horizontal layer and if i change the hierarchy position it will change the position also in the list, it will not maintain the same position on the ui. Adding another canvas specifically resolve the main issue of this thread.

 

You saved my week, thank you .