How to prevent Imagelabel overlaps

I wanted to create two (transparency) frames, with “shaders” (drop shadow), but if they collides, the imagelabel will overlap. How do I prevent that from happening, just like the example below? (from MC)
image

Change the ImageLabels ZIndex property.

but isnt it the same if the image is not full solid color

Honestly, I don’t really understand your question. Could you provide an image of what’s happening?

There are no shaders in Roblox. So if the transparency is an issue, then you just have to position and size the dropshadow ImageLabels correctly so they don’t overlap.

image

So you want to make a list where the black squares are below each other or something like that?

not rly black squares to be exact but slice yeah

I like trying to replicate stuff that I like (from MC) to learn more about UI

Roblox’ UI stuff is extremly scuffed. If you just want to do GUI, I would recommend learning HTML+CSS.

Normally you would put a larger container in a smaller one and have it be rendered behind it. Then use something like UIListLayout to make it a list.

In Roblox you will have to put the “slice” into the shadow, put those next to a UIListLayout and then set its Padding to 0,-50 assuming the Size of your drop shadow is 100. So it has to be half.

However this will never look like in Minecraft, since that uses actual shaders not images.