Issue with z-index and framer motion layoutId

Question

I'm using motion.span with layoutId set to underline to nicely animate bottom bar of my tabs. The problem is that is works nice when click from left tab to the right

From left to right

But its not visible when navifating from right tab to left because its hidden behind other tabs from right to left

HERE is an official example (edited to show the issue) https://codesandbox.io/p/sandbox/framer-motion-layout-animations-forked-y75fmd?file=%2Fsrc%2Fstyles.css%3A91%2C9

What should I change?

Full code

    <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] 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] 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>
                {/* <div
                ref={cursorRef}
                className='absolute bottom-[0px] h-[4.5px] w-[100px] transition-all duration-300'
                style={{
                  background:
                    'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
                  left: '0px',
                  width: '0px',
                  boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
                }}
              ></div> */}
              </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'>
                  {/* {data && (
                  <GridSelect
                    data={data}
                    defaultSelected={data.filter(
                      (x) => x.title === 'Arytmetyka'
                    )}
                  />
                )} */}
                </TabsContent>
                <TabsContent value='image'>Zdjęcie</TabsContent>
                <TabsContent value='video'>Wideo</TabsContent>
              </div>
            </Tabs>

upp

Answer 1

Just give the class .underline a z-index:

.underline{
/*styles*/
z-index: 69;