在react-router的Link组件内嵌Button时如何不使用z-index实现按钮独立点击

*z-index*完全不是实现该需求的唯一解决方案，在你当前的嵌套DOM结构下，z-index本身就是完全多余的——这个需求的本质是事件冒泡拦截，和层叠顺序没有任何关联。

你当前遇到的点击按钮触发Link跳转的问题，根本原因和层叠顺序无关：

• 结构里Link（渲染为<a>标签）是父元素，CustomButton是它的子元素，DOM默认的层叠规则本来就是“子元素视觉上在父元素上方”，不存在需要调整层叠的前提
• 触发跳转的核心逻辑是：点击按钮时，合成事件会沿着DOM树向上冒泡，最终被祖先级的Link组件捕获，执行内置的跳转逻辑
• 你需要的悬停双触发效果，本身也和层叠、事件冒泡无关：CSS的:hover伪类是基于鼠标几何位置判定的，只要鼠标处在Link的盒模型覆盖范围内，不管是不是落在内部的按钮上，Link的hover效果都会正常触发，同时按钮自身的hover效果也会同步生效。

完全保留你最初的嵌套结构，只需要在按钮的点击逻辑里加两行事件拦截代码即可，不需要调整任何层叠属性：

<div className="game-card">
  {/* Link保持占满整个卡片的块级样式，按钮周边区域天然属于Link的可交互范围 */}
  <Link to={`/games/${game.id}`} className="game-card__full-link">
    <GameInfo />
    <CustomButton 
      onClick={(e) => {
        // 阻止点击事件向上冒泡到Link，打断跳转触发逻辑
        e.stopPropagation();
        // 双保险：阻止a标签的默认跳转行为
        e.preventDefault();
        // 原有业务逻辑：将游戏加入库
        addToLibrary(game.id);
      }}
    >
      Add to Library
    </CustomButton>
  </Link>
</div>

对应效果验证 #

• 点击按钮时：事件被拦截，不会冒泡到Link触发跳转，只执行加入游戏库的逻辑
• 点击按钮周边的空白区域：无事件拦截，Link正常触发跳转，保持原有交互
• 悬停在按钮上时：鼠标几何位置在Link的覆盖范围内，Link的hover样式（如卡片阴影、背景加深）正常触发；按钮自身的hover样式也同步生效，完全匹配你要的双悬停效果
• 全程不需要给任何元素添加z-index属性，也不需要修改层叠上下文规则

很多人会误以为这类重叠交互需要调整z-index，本质是混淆了两个概念：

• 层叠顺序决定“哪个元素是鼠标命中的顶层元素”，只在两个同级元素出现几何重叠、需要调整视觉上下位置时才需要用到
• 事件冒泡决定“命中的元素触发的事件，会不会传递给祖先元素”，这个逻辑和层叠位置没有任何关系。你现在的结构下按钮天然就在Link的上层，根本不需要抬高层叠顺序，只需要打断事件传递路径即可。

就算你后续把按钮改成脱离Link DOM流的绝对定位元素，也依然不需要z-index：只要利用DOM渲染顺序（后渲染的元素天然在视觉上层）+ 事件拦截，就能实现同样的效果，全程不涉及z-index的使用。

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