Flex容器内<a>标签无法点击问题求助（Tailwind CSS）

我正在修复以下代码中失效的链接：

<div class="mx-auto mt-16 flex max-w-2xl flex-col gap-8 lg:mx-0 lg:mt-20 lg:max-w-none lg:flex-row lg:items-end">
  <div class="relative flex-col-reverse h-60 gap-x-16 rounded-2xl bg-gradient-to-r from-sc3/50 to-sc2/50 p-6 sm:flex-row-reverse sm:items-end lg:w-full lg:max-w-sm lg:flex-auto lg:flex-col lg:items-start">
    <div class="sm:w-80 sm:shrink lg:w-auto lg:flex-none">
        <p class="mt-2 text-lg font-semibold tracking-tight text-white sm:order-first">{{ $step1title }}</p>
        <div class="mt-4">
            @if($step1stats)
                @foreach($step1stats as $stat)
                    <p class="flex-none text-3xl font-bold tracking-tight text-white">
                        {{ $stat['stat'] }}
                        <span class="text-sm text-gray-300">{{ $stat['label'] }}</span>
                    </p>
                @endforeach
            @endif
        </div>
        <p class="mt-6 absolute bottom-6">
            <a href="{{ $step1buttonUrl }}" class="text-sm font-semibold leading-6 text-sc5">{{ $step1buttonText }} <span aria-hidden="true">→</span></a>
        </p>
    </div>
  </div>
</div>

我推测问题与relative或absolute类有关。移除父级div的relative类后，链接恢复可点击，但不再被包含在div内部。当前使用Tailwind CSS，求问是否有人能找出明显原因？

UI截图（代码对应第一个盒子，另外两个盒子也在该父div内，示例中已移除）：

问题原因分析 #

问题核心是绝对定位元素的层级与父级容器的布局冲突：

1. 父级div加relative后，内部的absolute bottom-6链接会相对于这个父级定位，但父级设置了固定高度h-60，如果内部文本区域高度超出，或者同层级的其他盒子（另外两个盒子）通过lg:flex-row布局覆盖了该链接的点击区域，就会导致链接被上层元素遮挡，无法触发点击事件。
2. 移除父级relative后，链接会相对于更外层的容器定位，脱离了当前盒子的约束，因此不再被遮挡，但位置也超出了盒子范围。

修复方案 #

推荐两种实用的解决方式：

• 方案一：提升链接层级，保留定位
  给链接所在的<p>标签添加z-10类，确保它在父级容器内的层级高于其他子元素，避免被遮挡：

  <p class="mt-6 absolute bottom-6 z-10">
    <a href="{{ $step1buttonUrl }}" class="text-sm font-semibold leading-6 text-sc5">{{ $step1buttonText }} <span aria-hidden="true">→</span></a>
  </p>
  

  同时保留父级的relative类，确保链接始终在盒子内部。

• 方案二：改用流式布局，放弃绝对定位
  利用父级的flex布局，用mt-auto让链接自动推到容器底部，这种方式更稳定，不会有定位冲突：

  <p class="mt-auto">
    <a href="{{ $step1buttonUrl }}" class="text-sm font-semibold leading-6 text-sc5">{{ $step1buttonText }} <span aria-hidden="true">→</span></a>
  </p>
  

  这种方式不需要依赖absolute和relative，完全遵循flex的流式布局逻辑，更符合Tailwind的设计理念。

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