Framer motion 和 Next JS Bug，动画总是显示在顶部

Question

我对 Framer motion 和 NextJS 有疑问， 我有一个动画徽标，还有一个菜单作为模态，但是当模态被激活时，徽标总是显示在顶部，我在页面上使用的每个 motion.div 元素都会发生这种情况。我想知道如何解决这个错误。

感谢您的帮助。

我尝试使用 CSS Zindex 属性，但没有用

徽标组件

'use client'
import { motion } from 'framer-motion'

const LogoFull = () => {
    return (
        <motion.div
            animate={{ scale: 1.1 }}
            transition={{ type: "spring", stiffness: 100, repeat: Infinity, duration: 2, repeatType: "mirror" }}
        >
            <svg

                fill="currentColor" width="100%" height="100%" viewBox="0 0 8000 6375" version="1.1" > <g><g><g><path d="M159.208,4712.6l170.628,0l520.361,1221.09l529.899,-1221.09l171.687,0l-684.629,1580.17l-33.914,0l-674.032,-1580.17Z" /><g><path d="M2138.91,5064.22c178.752,0 327.124,64.997 445.115,194.992c106.686,119.338 160.03,260.343 160.03,423.013c-0,162.67 -56.523,304.918 -169.568,426.743c-113.045,121.825 -258.238,182.738 -435.577,182.738c-178.046,-0 -323.415,-60.913 -436.107,-182.738c-112.692,-121.825 -169.038,-264.073 -169.038,-426.743c0,-161.96 53.343,-302.609 160.03,-421.948c117.991,-130.704 266.362,-196.057 445.115,-196.057Zm-0,147.043c-123.643,-0 -229.976,46.173 -318.999,138.518c-89.023,92.346 -133.535,203.871 -133.535,334.575c0,84.532 20.313,163.558 60.938,237.08c40.626,73.521 95.559,129.994 164.799,169.418c69.24,39.424 144.839,59.137 226.797,59.137c83.371,-0 159.499,-19.713 228.386,-59.137c68.887,-39.424 123.467,-95.897 163.739,-169.418c40.273,-73.522 60.409,-152.548 60.409,-237.08c-0,-130.704 -44.512,-242.229 -133.535,-334.575c-89.023,-92.345 -195.356,-138.518 -318.999,-138.518Z" /><rect x="2996.29" y="4669.98" width="150.491" height="1620.66" /><path d="M3874.86,6125.48c-73.479,39.779 -145.545,42.976 -216.199,9.589c-86.197,-66.062 -127.175,-160.184 -122.936,-282.364l-0,-494.404l275.547,0l0,-128.928l-276.607,-0l-0,-564.729l-150.491,0l-0,1213.63c-1.413,85.242 18.016,163.38 58.289,234.415c66.414,112.946 156.85,172.615 271.308,179.009c60.762,2.131 130.002,-11.721 207.72,-41.556c-12.011,-29.835 -27.554,-71.39 -46.631,-124.666Z" /><path d="M4708.92,5064.22c178.753,0 327.125,64.997 445.116,194.992c108.805,118.628 163.208,259.633 163.208,423.013c1.413,403.479 1.413,608.415 0,614.808l-157.91,0l0,-265.316c-82.664,154.857 -232.802,241.519 -450.414,259.989c-178.046,-0 -323.415,-60.913 -436.107,-182.738c-112.691,-121.825 -169.037,-264.073 -169.037,-426.743c-0,-161.96 53.343,-302.609 160.029,-421.948c117.991,-130.704 266.363,-196.057 445.115,-196.057Zm0,147.043c-123.643,-0 -229.976,46.173 -318.999,138.518c-89.023,92.346 -133.534,203.871 -133.534,334.575c-0,84.532 22.785,165.867 68.356,244.005c45.572,78.139 122.76,144.202 231.566,198.188c272.722,61.09 466.665,-63.576 581.83,-373.999c6.358,-99.449 -4.24,-194.636 -31.794,-285.561c-19.783,-41.2 -46.985,-80.27 -81.605,-117.208c-86.903,-92.345 -192.177,-138.518 -315.82,-138.518Z" /><path d="M7730.41,4982.18l-121.877,116.142c-87.61,-86.662 -183.522,-152.37 -287.735,-197.122c-104.214,-44.752 -206.131,-67.128 -305.752,-67.128c-122.937,-0 -240.044,30.545 -351.323,91.635c-111.279,61.09 -197.652,143.491 -259.121,247.202c-61.468,103.711 -92.202,202.45 -92.202,296.216c-0,119.339 31.794,232.462 95.382,339.37c63.588,106.908 151.374,190.729 263.359,251.464c111.986,60.735 234.393,91.102 367.221,91.102c161.089,0 297.626,-45.817 409.612,-137.453c111.985,-91.635 178.575,-210.263 199.771,-355.885l-501.284,0l-0,-152.37l676.151,-0c-1.413,244.36 -73.303,438.286 -215.669,581.777c-142.366,143.49 -333.66,215.236 -573.88,215.236c-289.679,-0 -519.302,-99.449 -688.869,-298.347c-130.709,-153.436 -196.063,-330.668 -196.063,-531.697c0,-149.884 37.27,-283.43 111.809,-400.638c74.539,-117.208 177.163,-212.395 307.871,-285.561c130.709,-73.166 278.374,-109.749 442.996,-109.749c132.828,0 257.884,24.33 375.168,72.989c117.285,48.659 232.096,126.264 344.435,232.817Z" /></g></g></g><rect x="2531.5" y="1790.62" width="5468.5" height="400.862" /><path d="M7969.62,1789.85c19.979,115.858 30.379,234.85 30.379,356.183c0,1184.42 -990.921,2146.03 -2211.45,2146.03c-1220.54,0 -2211.45,-961.604 -2211.45,-2146.03c-0,-1184.42 990.917,-2146.03 2211.45,-2146.03c759.596,0 1430.26,372.446 1828.48,939.258l-297.904,283.888c-319.879,-488.634 -886.046,-813.642 -1530.58,-813.642c-997.283,0 -1806.95,778.113 -1806.95,1736.53c-0,958.413 809.667,1736.53 1806.95,1736.53c997.283,0 1806.95,-778.112 1806.95,-1736.53c0,-122.067 -13.137,-241.204 -38.121,-356.183l412.246,-0Z" /><path d="M0,0l460.392,0l1420.84,3330.96l650.271,-1540.35l456.917,-0l-1068.36,2504.62l-87.904,-0.001l-1832.15,-4295.25l0,0.013Z" /></g>
            </svg >
        </motion.div>
    )
}

export default LogoFull

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

菜单组件

'use client'
import { useState } from 'react'
import MenuIcon from './icons/MenuIcon';
import LinksList from './LinksList';
import CloseIcon from './icons/CloseIcon';
import { AnimatePresence, motion } from 'framer-motion'

type Props = {
    links: string[]
    lang: string
}

const Menu = ({ links, lang }: Props) => {
    const [isNavOpen, setIsNavOpen] = useState(false);
    return (
        <div className="h-full lg:hidden ">
            <AnimatePresence>
                {!isNavOpen ?
                    <button onClick={() => setIsNavOpen(true)} className="navLink h-full">
                        <MenuIcon />
                    </button>
                    :
                    <button onClick={() => setIsNavOpen(false)} className="navLink h-full">
                        <CloseIcon />
                    </button>
                }
                {isNavOpen &&
                    <motion.div
                        key="isNavOpen"
                        initial={{ x: "-100%" }}
                        animate={{ x: 0 }}
                        exit={{ x: "100%" }}
                        className="fixed top-[72px] left-0 h-screen w-screen bg-stone-100 dark:bg-black bg-opacity-90 flex flex-col justify-center items-center gap-y-10 px-2 z-50">

                        <LinksList closeMenu={setIsNavOpen} links={links} lang={lang} />
                    </motion.div>
                }
            </AnimatePresence>
        </div>
    )
}

export default Menu

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>