如何用纯CSS实现含内部链接的可点击内容卡片？

我刚好做过类似的需求，完全用纯CSS就能搞定，核心就是利用定位+z-index层级控制，你之前的思路是对的，可能是细节没处理到位，比如定位的设置或者z-index的生效条件。

实现思路 #

1. 给卡片容器设置position: relative，作为内部绝对定位元素的参考基准
2. 在卡片内部添加一个全屏覆盖的<a>标签作为主跳转链接，设置position: absolute并填满整个卡片，z-index设为基础层级（比如1）
3. 给卡片内的编辑、举报等内部链接设置position: relative（或其他非static定位），并把z-index设为比主链接更高的值（比如2），让内部链接能覆盖在主链接之上，优先响应点击

完整代码示例 #

<div class="card">
  <!-- 主跳转链接：覆盖整个卡片 -->
  <a href="/full-content" class="card-main-link"></a>
  
  <div class="card-content">
    <h3>卡片标题</h3>
    <p>这里是卡片的简要内容，点击空白区域会跳转到完整内容页面</p>
    <div class="card-actions">
      <!-- 内部链接：优先级高于主链接 -->
      <a href="/edit" class="card-action-link">编辑</a>
      <a href="/report" class="card-action-link">举报</a>
    </div>
  </div>
</div>

.card {
  position: relative; /* 关键：作为内部绝对定位的参考容器 */
  width: 300px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer; /* 给卡片加鼠标指针，提示可点击 */
}

/* 主跳转链接：覆盖整个卡片 */
.card-main-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* 基础层级 */
}

.card-content {
  position: relative;
  z-index: 1; /* 确保内容在主链接之上，避免被遮挡 */
}

/* 内部操作链接：层级高于主链接 */
.card-action-link {
  position: relative; /* 必须设置非static定位，z-index才会生效 */
  z-index: 2;
  margin-right: 15px;
  color: #007bff;
  text-decoration: none;
}

.card-action-link:hover {
  text-decoration: underline;
}

关键细节说明 #

• 主链接必须是绝对定位，并且top/left/right/bottom都设为0，才能完全覆盖卡片容器
• 内部链接必须设置非static定位（比如relative），否则z-index属性不会生效，无法覆盖主链接
• 卡片容器的cursor: pointer是为了给用户视觉提示，明确卡片可点击

这样设置后，点击卡片的空白区域会触发主链接跳转，点击编辑/举报按钮则会触发对应的内部链接，完全不需要JavaScript，完美符合你的需求！

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