Framer Motion layoutId标签下划线动画z-index层级问题求助

我通过给motion.span设置layoutId='underline'实现标签页底部下划线的流畅过渡动画。从左侧标签切换到右侧时动画正常，但从右侧切换到左侧时，下划线会被中间的标签元素遮挡，无法显示。

问题根源是下划线的层级低于TabsTrigger元素，反向移动时会被中间的标签覆盖。只需要给所有下划线的motion.span设置足够高的z-index，确保它在所有标签触发器的上层：

• 给三个motion.span的className统一添加z-[100]（数值只要高于TabsTrigger的层级即可）

<Tabs
  value={activeTab}
  onValueChange={setActiveTab}
  className='mt-[100px] min-h-[300px] w-full'
>
  <TabsList className='flex items-start '>
    <TabsTrigger
      value='latex'
      className='flex items-center gap-1.5'
    >
      <Keyboard className='h-5 w-5' />
      <span>LaTeX</span>
      {activeTab === 'latex' && (
        <motion.span
          layoutId='underline'
          className='absolute left-0 top-full -mt-[4px] z-[100] block h-[3px] w-full'
          transition={{ duration: 200 }}
          style={{
            background:
              'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
            boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
          }}
        />
      )}
    </TabsTrigger>
    <TabsTrigger
      value='image'
      className='flex items-center gap-1.5'
    >
      <ImageIcon className='h-5 w-5' />
      <span>Zdjęcie</span>
      {activeTab === 'image' && (
        <motion.span
          layoutId='underline'
          className='absolute left-0 top-full -mt-[4px] z-[100] block h-[3px] w-full'
          transition={{ duration: 200 }}
          style={{
            background:
              'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
            boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
          }}
        />
      )}
    </TabsTrigger>
    <TabsTrigger
      value='video'
      className='flex items-center gap-1.5'
    >
      <PlaySquare className='h-5 w-5' />
      <span>Wideo</span>
      {activeTab === 'video' && (
        <motion.span
          layoutId='underline'
          transition={{ duration: 200 }}
          className='absolute left-0 top-full z-[100] -mt-[4px] block h-[3px] w-full'
          style={{
            background:
              'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
            boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
          }}
        />
      )}
    </TabsTrigger>
  </TabsList>
  <div
    className='min-h-[300px] rounded-[5px] border-y border-y-[#3b3d3f] bg-[#20222c] p-5'
    style={{
      boxShadow:
        '0 2px 3px rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 10%)',
    }}
  >
    <TabsContent value='latex'>
    </TabsContent>
    <TabsContent value='image'>Zdjęcie</TabsContent>
    <TabsContent value='video'>Wideo</TabsContent>
  </div>
</Tabs>

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