如何在按钮上方添加文本且不影响按钮的正常点击交互功能

问题原因 #

你的按钮点击失效是上层文本元素拦截了点击事件导致的：

• 渲染顺序上，你把文本<h2 class="text">写在<a class="newbutton">的后面，DOM树后加载的元素默认层级更高
• 文本区域和按钮区域完全重叠，用户点击文本覆盖的区域时，事件会被文本层捕获，不会传递到下层的按钮元素

解决方案 #

方案1（最推荐：语义合理，无兼容问题） #

调整DOM结构，把文本放到按钮元素内部，既符合可点击元素的语义规范，也能彻底解决点击问题。
修改后HTML对应部分：

<a class="newbutton" href="https://www.bitbucket.com" target="blank">
  <h2 class="text">Entry</h2>
</a>

同步调整.text的CSS，去掉绝对定位相关属性，改为基于按钮的居中布局：

.text {
  margin: 0;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  line-height: 63px; /* 和按钮高度一致，实现垂直居中 */
  text-align: center;
  color: #FFFFFF;
}

方案2（改造成本最低） #

如果不想改动现有DOM结构，直接给文本层添加pointer-events: none属性即可，该属性会让元素忽略所有鼠标交互事件，点击会直接穿透到下层的按钮。
修改后.text的CSS：

.text {
  position: relative;
  width: 218px;
  height: 44px;
  left: 675px;
  top: 579px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  line-height: 42px;
  color: #FFFFFF;
  pointer-events: none; /* 新增这一行 */
}

内容的提问来源于stack exchange，提问作者thisiswhoiam