How can i set the order in which buttons overlap with eachother?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By KnightNine

The issue is that what button the mouse hovers over isn’t affected by the z-index value of it’s parent node2D and rather just based on the order of the scene tree (buttons drawn last in the scene are hovered over first). The button’s texture is affected by it’s parent’s z_index however, I find this misleading.

I was able to easily test this in a project with 2 node2D nodes with button nodes within them and setting the z_index of the node higher in the scene tree a higher value than the node below it:
overlapping buttons

any suggestions would be appreciated though I might just have to write a function which automatically resizes itself relative to other buttons.

:bust_in_silhouette: Reply From: LoneDespair

Whatever GUI node is at the bottom will always be the priority on both rendering and detecting mouse hover/clicks

changing the z-axis will only change the priority on rendering

tho if it’s really necessary to have them on top of the scene tree, you can have their sub parent set to canvas layer and change their layer higher than the ones at the bottom (this will complicate your scene tree in the long run)