How do I make multiple buttons and checkboxes moved through css interactable?

I have a page with a checkmark and two buttons. Sometimes when I move them through css I cant interact with them any longer, I have previously solved this through using z-index: 1;, like this:

<div style="position: relative; bottom: +95; z-index: 1;">
<button name="" value="">Bypass</button>
<button name="open" value="n">Bypass</button>
</div>

But when I add a checkbox under these buttons like this:

<div style="position: relative; bottom: +115px; font-size: 13px; margin-left: -435px;">1: <input type="checkbox" name="one" value="yes"></div>

I can't interact with it.

I have tried adding z-index: 2; like this:

<div style="position: relative; bottom: +115px; font-size: 13px; margin-left: -435px; z-index: 2;">1: <input type="checkbox" name="one" value="yes"></div>

Which makes the checkbox interactable, but it also makes the buttons un-interactable. How can I make both the buttons and the checkbox interactable?