UI elements stop working based on hirarchy position

I am trying to create a simple UI for a demo scene I am working on, and on this canvas I have a few elements: A panel, 2 buttons (each enable the other and disable themselves), a custom input field (basically a button that instantiates an in game keyboard when clicked for vr uses) and a slider.

As for my problem: While testing, I noticed some of the elements stopped working. At first I assumed it was because of overlapping, or maybe the sizing messed with the highlighting of UI objects, so I scaled everything to a scale of 1 and made sure nothing overlaps. But when I tried my next possible solution, things got WEIRD.

I started moving things in the hirarchy, and to my surprise, DIFFERENT elements stopped working (List of tests below images).

Hirarchy of the scene:
alt text

canvas in the editor:
alt text

Here is a list of what gets disabled based on the order in the hirarchy:

Buttons → Slider → Input & Buttons → Input → Slider

(Both buttons stopped working)

.

Input → Buttons → Slider

(Input and button 1 stopped working (This confuses me the most, as if it would be due to overlap, button 2 should not be working as well))

.

Input → Slider → Buttons

(Only input stopped working)

.

Slider → Buttons → Input & Slider → Input → Buttons

(Only slider stopped working)

I decided to try add some new buttons on top of the hirarchy using the “Buttons → Input → Slider” order, and for each button I added on top, the lowest button in the hirarchy that didn’t work started working (1 button added, button 2 started working, 2 buttons added, button 1 started working, 3 buttons added, the first newly added button started working etc. etc.), confusing me even further…

.

Edit: Ok, so I got it working when changing the “order in layer” the sorting layer on the canvas to 10, but this still confuses me as the order in which certain elements got disabled was so strange.