你的cyber-block-wrapper div覆盖了整张卡片，并且在复制按钮的前面，所以它会阻挡点击（和悬停）。如果你不想发生这种情况，你可以在cyber-block-wrapper上设置pointer-events: none。

真实的的问题是带有z索引的元素堆栈，然而，考虑到你似乎正在尝试的东西，感觉网格实际上可能工作得更好，并将许多样式移到CSS中，而CSS可能更适合它。
我注解掉了很多CSS，并在那里放了一些更新，但是注意z-index部分是这里的关键部分。
FWIW最经常与CSS太多是问题和删除和简化，并侧重于目标状态是一个很好的策略，而不是试图添加更多。

document.querySelector(".widget.copy").addEventListener("click", (event) => {
  console.log(event.currentTarget);
  event.currentTarget.dataset.gotclicked = "cheers";
});

:root {
  /* patch up the missing variables to prevent errors since no fallback in place */
  --card-front: #00000022;
  --card-shadow: 5px 5px 15px #FF000044;
  --card-color: #0000FFDD;
  --font-size: 16px;
}

.card-wrapper {
  /* this is really the wrapper/parent of all this */
  font-size: var(--font-zize);
  background-color: var(--card-front);
  box-shadow: var(--card-shadow);
  margin: auto;
  margin-top: 1.875em;
  margin-bottom: 1.875em;
  border-radius: 1.25em;
  transition: box-shadow 200ms ease-in, transform 400ms ease-in;
}

.card-sides {
  /* this is really the wrapper/parent of all this */
  transform: scale(1, 1);
  width: 31.25em;
  height: 18.75em;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  color: var(--card-color);
}

.widget.copy {
  grid-row: 1;
  grid-column: 12;
  background-color: #ffffff;
  margin-top: 1rem;
  margin-right: 1rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
}

.widget.copy[data-gotclicked="cheers"] {
  background-color: #FBFB04;
}

.cyber-block-wrapper {
  /* I don't know what this is for but push it back behind so we can click */
  grid-row: 1 / span 8;
  grid-column: 1 / span 12;
  z-index: -1;
  overflow: hidden;
  border: solid 1px lime;
}

.card-text.md-auto-format {
  opacity: 1;
  grid-row: 2 / span 7;
  grid-column: 1 / span 12;
  display: grid;
  /* super center the content */
  place-items: center;
  font-size: 2em;
  font-family: Georgia, serif;
}

/* does not exist
.card-wrapper .card-back {
  background-color: var(--card-back);
  color: var(--card-color);
}

.card-wrapper .card-text {
  padding: 15px;
  height: calc(100% - 15px);
  width: calc(100% - 15px);
  font-size: 40px;
  font-family: Georgia;
  white-space: wrap;
  overflow: auto;
}

.card-wrapper .card-text,
.card-wrapper .card-text>p,
.card-wrapper .card-text>p>p {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-sides.card-on-front {
  background-color: var(--card-back);
  color: var(--card-color);
}
*/

/*
.copiable {
  position: relative;
  z-index: 2000;
}
*/

/*
.copiable .widget {
  z-index: 200000;
  text-indent: 0;
  position: absolute;
  top: 10px;
  content: "double click to selection";
  padding: 0;
  width: auto;
  height: auto;
  position: absolute;
  font-size: 12px;
  color: #333;
  line-height: 20px;
  overflow: hidden;
  backface-visibility: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 10;
  background: #fff;
  transition: all 400ms ease-in;
  padding: 5px;
  border-radius: 5px;
  font-weight: bold;
  display: none;
}

.widget:hover {
  opacity: 0.75;
}*/

<div class="card-wrapper card-sides copiable">
  <div class="widget copy">copy</div>
  <div class="cyber-block-wrapper">
  </div>
  <div class="card-text md-auto-format">
    <p>
      <p>
        <strong>bold</strong>&nbsp;
        <ins>underline</ins>&nbsp;
        <del>deleted</del>&nbsp;
      </p>
    </p>
  </div>
</div>

旁边总是有一个exclaination标记，我看不到任何有用的警告。
您在.copiable .widget中收到警告，因为您命名的所有属性（position、z-index、padding、transition）都重复。
要解决“感叹号”问题，您可以简单地删除重复的值，只保留您想要的值。（例如：删除padding: 5px;并保留padding: 0;，或相反）

**禁用文本选择：**为此，您可以使用CSS属性user-select: none;

或者如果你想坚持你的例子：
编辑.copiable .widget删除复制的z-index: 10;，使复制按钮的z轴比容器.copiable的z轴高。

.copiable .widget {
    /* otherattributes */
    z-index: 20000
}

.copiable{ 
     z-index: 2000;
}