解决此问题的一种常见方法是使用CSS的z-index属性来控制按钮的层级关系。可以通过将按钮的z-index值设置为较高的数值，使其位于其他元素之上，从而避免被覆盖。

以下是一个示例代码，演示如何使用z-index属性解决按钮被覆盖的问题：

HTML代码：

  按钮
  

CSS代码：

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

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

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* 其他覆盖元素的样式 */
  /* ... */
  z-index: 1;
}

在上述代码中，使用了一个包含按钮和覆盖层的容器元素。通过将容器元素的position属性设置为relative，使得子元素的position属性值为relative时，其定位参照对象是容器元素。

按钮的z-index值设置为2，而覆盖层的z-index值设置为1。由于按钮的z-index值较高，所以按钮会位于覆盖层之上，从而可以正常运作。

请注意，z-index属性只在position属性值为relative、absolute或fixed的元素上生效。另外，z-index值较高的元素会覆盖z-index值较低的元素。