我有一个带有复选标记和两个按钮的页面。有时当我通过css移动它们时我不能再与它们进行交互了，我之前通过使用z-index: 1;解决了这个问题，如下所示：
<div style="position: relative; bottom: +95; z-index: 1;">
<button name="" value="">Bypass</button>
<button name="open" value="n">Bypass</button>
</div>
但是当我在这些按钮下面添加一个复选框时：
<div style="position: relative; bottom: +115px; font-size: 13px; margin-left: -435px;">1: <input type="checkbox" name="one" value="yes"></div>
我无法与之互动。
我尝试过这样添加z-index: 2;：
<div style="position: relative; bottom: +115px; font-size: 13px; margin-left: -435px; z-index: 2;">1: <input type="checkbox" name="one" value="yes"></div>
这使得复选框可以互动，但它也使按钮不可互动。如何使按钮和复选框都可以互动？