我有下面的nextjs組件& quotNavbar.jsx & quot：

'use client';

import { motion } from 'framer-motion';

import styles from '../styles';
import { navVariants } from '../utils/motion';
import Link from 'next/link';

const Navbar = () => (
  <motion.nav
    variants={navVariants}
    initial="hidden"
    whileInView="show"
    className={`${styles.xPaddings} py-8 relative`}
  >

    <div className="absolute w-[50%] inset-0 gradient-01" />
    <div
      className={`${styles.innerWidth} mx-auto flex justify-between gap-8`}
    >
      <Link href='/'>NAV TEST LINK</Link>
      <Link href='/'>
      <img
        src="/search.svg"
        alt="search"
        className="w-[24px] h-[24px] object-contain"
      />
      </Link>
      <Link href='/'>NAV TEST LINK 2</Link>
      <h2 className="font-extrabold text-[24px] leading-[30.24px] text-white">
        METAVERSUS
      </h2>
      <Link href='/'>NAV TEST LINK 3</Link>
      <Link href='/'>
      <img
        src="/menu.svg"
        alt="menu"
        className="w-[24px] h-[24px] object-contain"
      />
      </Link>

    </div>
  </motion.nav>
);

export default Navbar;

我意識到第一個div & ltdiv className = & quot絕對w-[50%]插入-0漸變-01 & quot；/& gt；阻止了一些鏈接元素并使超鏈接不可見。除了加上& quotz-10 & quot；所有鏈接元素，使它們?nèi)靠梢姡瑫r保持& quotinset-0 & quot；div原樣？