含span标签的Anchor无法点击，求助z-index正确使用方式

数据老陈

2026-8-21

解决方案：修复无法点击的Anchor标签

问题根源

你的Anchor标签无法点击，核心原因有两个：

父元素<main>设置了pointer-events: none，这个属性会禁用自身及所有子元素的鼠标交互（包括点击），直接导致a标签无法响应点击。
<main>的z-index: -1会让它处于页面底层，可能被其他元素遮挡，进一步影响点击。

具体修复步骤

方案1：移除main的禁用交互属性（推荐）

直接修改<main>的CSS样式，移除pointer-events: none并调整z-index确保层级正常：

main {
    /* 移除pointer-events: none，恢复鼠标交互 */
    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1; /* 提升main层级，避免被页面其他元素遮挡 */
}

方案2：保留main设置，单独恢复a标签的交互

如果必须保留main的pointer-events: none，可以给目标a标签强制开启交互，并设置更高的z-index确保它在顶层：

.slide-down {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    pointer-events: auto; /* 打破父元素的交互禁用，恢复点击 */
    z-index: 10; /* 确保a标签在所有定位元素上方，不会被遮挡 */
}