How to fix overlapping text in widgets?

I am creating a simple little game and I made a GUI button for the score I created the bind for the text so when you click anywhere on the screen the score goes up by 1 and when I edit the widget to move the bound text onto the GUI button the text that shows your score just drops behind the gui button and you can’t see the text because it’s below the image of the GUI button and I don’t know how to fix this because I am a beginner at this so I’m not sure.

Can’t really help without seeing the UI, please post screenshots of the widget blueprint.

I gave the image of the widget blueprint. In the widget blueprint, you can the “ck” behind the GUI button but when the game starts the value changes to 0 so that when you click it goes up by 1 but I want the text that displays the score to be on top of the green gui button but it’s below it instead
image:
Imgur

and here’s the second image of what it looks like in-game because i cant submit 2 images in one post

Imgur

You can add an Overlay where the image currently is and then add the image and text to the overlay. Then you can reorder them however you want.


(recommended)


Or if you don't want to add an overlay, you can also adjust the ZOrder of the Text like so :

Select the text, in the details, under Slot (Canvas Panel Slot), set ZOrder to something greater than 0 :

image
(quick fix)

oh ok thanks alot for the second response the mouse image wasnt overlapping anymore but the text still was thank you man the overlay was having some problems or something thanks

1 Like

That’s great.

I would suggest these videos to learn more about working with UI in Unreal. They are kinda long but I highly recommend watching these when you have time.