您可以在.card上使用pointer-events:none;。这将禁用.card div上的click事件，用户可以单击它后面的按钮。More info here (MDN)。
下面是一个示例，展示了如何在隐藏在另一个元素后面的元素上启用单击事件：

button {
  margin: 50px;
}

button:focus {
  background: red;
}
button:hover {
  background: teal;
}

.inFront {
  pointer-events: none;
  position: absolute;
  top: 25px; left: 25px;
  right: 25px; height: 150px;
  border: 3px solid red;
  background: rgba(0, 0, 0, .5);
}

<button onclick="alert('button clicked');">I am a button behind the .inFront div</button>
<div class="inFront"></div>

在本例中，.inFront div位于按钮上方，但div上的pointer-events: none;属性允许单击、聚焦和悬停按钮。
对于你的例子，缺点是它也会禁用文本区和"卡片按钮"，所以你必须修改HTML，并将文本区和卡片按钮移出.card div，这样它们仍然可以点击。

• • 第一个e第一个f第一个x

在本例中使用z-index。

<button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute; z-index:1;">This is a background button</button>

DEMO
这会将元素在深度域中的位置放在高于其他元素的位置。数字越大，堆栈顺序就越高。

z-index: 1;

但是，z轴需要定位，例如position: absolute;或position: relative;。
Read a great article about Z-Index here.

给予按钮一个正的z-index

button {
    position: absolute;
    z-index: 1;
}

对于那些谁有同样的问题，因为我在哪里（不重组您的HTML）：

1. div 1位于div 2的顶部
   1.第1部分和第2部分都需要可点击/交互
   1.但是，div 2应该在div 1之前
   将以下代码应用于div 2：

div2 {
  position: absolute; // to manipulate position
  z-index: 999; // manipulating the position, putting it in front of div1
  pointer-events: visible; // making it interactive, clickable
}