Help With Z-Index Overlapping

I have four frames, like the following:
image
TopFrame has a Z-Index of 2
BottomFrame has a Z-Index of 1
TopFrame.Frame has a Z-Index of 1
BottomFrame.Frame has a Z-Index of 1
BottomFrame.Frame.TextButton has a Z-Index of 1 (IMPORTANT)

TopFrame.Frame is overlapping the TextButton. However, when I click TopFrame.Frame, the TextButton’s MouseButton1Click event fires. How can I stop the TextButton event from firing only in area where a GUI has a higher Z-Index?

Is the issue because only TopFrame has a higher Z-Index and it’s children need it as well to block events from UIElements underneath?

It’s an issue with Roblox’s way of handling UIs. You would have to put a button somewhere on top of the button to block the input so the click event isn’t fired.

If I understand correctly, you have a button that is overlapped by a frame which means that the button isn’t visible to the player but can still be pressed. You could have a check in the MouseButton1Click event that checks if the frame is visible and if it is, fire the event. Possibly something like this:

BottomFrame.Frame.TextButton.MouseButton1Click:Connect(function()
	if TopFrame.Visible == false then
		-- do whatever
	end
end)

@7z99 @Master_Aaron It’s like this:

Yeah, create a TextButton whose parent is Frame, size it to be 1,0,1,0 and then the text button shouldn’t receive input in that boundary. Also ensure its Visible property is true but the BackgroundTransparency and TextTransparency properties should be 1.

1 Like