解决按钮重叠复选框文本的问题可以通过以下几种方法：

1. 调整样式： 在CSS中，可以使用z-index属性来调整元素的层叠顺序。可以尝试调整复选框和按钮的层叠顺序，使复选框显示在按钮之上：

   .checkbox {
     position: relative;
     z-index: 2;
   }
   
   .button {
     position: relative;
     z-index: 1;
   }
   

2. 改变元素结构： 如果调整样式无效，可以尝试改变HTML结构，将复选框和按钮放在不同的容器中，并使用CSS布局将它们分开：

   
     
     复选框文本
   
   
   
     按钮
   
   

   .checkbox-container {
     position: relative;
     z-index: 2;
   }
   
   .button-container {
     position: relative;
     z-index: 1;
   }
   

3. 使用JavaScript： 可以使用JavaScript来处理按钮和复选框的交互，并动态调整它们的位置。例如，可以在按钮上添加一个事件监听器，在点击按钮时将复选框的位置移动到按钮旁边：

   
   复选框文本
   按钮
   

   const checkbox = document.getElementById("checkbox");
   const button = document.getElementById("button");
   
   button.addEventListener("click", function() {
     const checkboxRect = checkbox.getBoundingClientRect();
     const buttonRect = button.getBoundingClientRect();
     const checkboxTop = checkboxRect.top;
     const checkboxLeft = buttonRect.left + buttonRect.width + 10;
     
     checkbox.style.position = "fixed";
     checkbox.style.top = checkboxTop + "px";
     checkbox.style.left = checkboxLeft + "px";
   });
   

   这段代码会在点击按钮时将复选框的位置移动到按钮的右侧，并保持在页面上的固定位置。

通过以上三种方法中的一种或者结合使用，可以解决按钮重叠复选框文本的问题。