我正在创建一个React.js应用程序，但这主要是一个CSS问题。
如何防止在垂直调整窗口大小时对象向上移动？当你浏览大多数商业网站时，当窗口垂直收缩时，没有元素移动，相反，你会得到一个滚动条来滚动所有内容。我的问题是，我的汉堡菜单在移动的上，或较小的屏幕上，菜单向上移动，重叠我的导航栏。我该如何防止这种情况？
我的导航栏组件：

return ( 
        <nav className={Styles.navbar}>
            <Link to='/'>
                <img src='/src\images\logo-color.png'/>
            </Link>
                <ul className={`${Styles.navlinks} ${mobileNavClass}`}>
                    <li>
                        <NavLink onClick={toggleMobileMenu} to='/'>
                            HOME
                        </NavLink>
                    </li>
                    <li>
                        <NavLink onClick={toggleMobileMenu} to='/menu'>
                            MENU
                        </NavLink>
                    </li>
                    <li>
                        <NavLink onClick={toggleMobileMenu} to='/signin'>
                            SIGN&nbsp;IN
                        </NavLink>
                    </li>
                </ul>

                <div className={Styles.iconcontainer}>
                    <div onClick={toggleMobileMenu} className={Styles.hamburger}>
                        {!mobileMenuOpen ? (<RxHamburgerMenu className={Styles.hamburgericon}/>) : (<RxCross2 className={Styles.hamburgericon}/>)}
                    </div>
                    <div className={Styles.cart}>
                        <NavLink onClick={handleCartClick} to='/cart'>
                            <AiOutlineShoppingCart className={Styles.carticon}/>
                        </NavLink>
                    </div>
                </div>

               
        </nav>
     );

这是我的CSS模块：

img {
   height: 116px;
   width: 116px;
   margin-left: 2rem;
   z-index: 100;
   user-select: none;
}

 li {
    font-size: 1.5rem;
    height: 100%;
    cursor: pointer;
    user-select: none;
 }

 a {
    text-decoration: none;
    color: #414241;
    font-family: 'Burnest', sans-serif;
 }

.navbar {
   top: 0;
   height: 120px;
   display: flex;
   justify-content: space-between;
   padding: 0.5rem;
   z-index: 10;
   position: sticky;
   z-index: 9999;
}

.navlinks {
   margin-right: 2rem;
   gap: 4rem;
   margin-top: 2.5rem;
   display: flex;
   align-items: center;
   list-style: none;
 }

 .iconcontainer {
   display: flex;
   gap: 1rem;
 }

 .hamburger {
   display: none;
   align-items: center;
   cursor: pointer;
 }

 .hamburgericon {
   height: 32px;
   width: 32px;
   margin-top: -4px;
   color: #414241;
 }

 .cart {
   margin-right: 1rem;
   display: flex;
   align-items: center;
   margin-top: -8px;
   color: #414241;
 }

 .carticon {
   height: 40px;
   width: 40px;
 }

 @media screen and (max-width: 768px) {

   img {
      margin-left: 0; 
      height: 80px;
      width: 80px;
   }

   ul {
      margin: 0;
      padding: 0;
   }

   li {
      margin: 0;
      padding: 0;
   }

   .navbar {
      height: 100px;
   }

   .navlinks {
      position: fixed;
      top: 8%;
      left: 0;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6rem;
      z-index: 9998;
      transform: translateX(120vw);
      overflow-y: scroll;
   }

   .navmobile {
      transform: none;
   }

   .cart {
      margin-top: -2px;
    }

   li {
      height: 3rem;
   }

   .hamburger {
      display: flex;
   }   

   body {
      overflow: hidden;
   }

 }

我想我只是不确定是哪个属性导致了元素的移动，或者应该使用哪个属性来防止它发生？
我试过把我所有的内容在一个 Package ，并给它一个固定的宽度，似乎没有工作。我的正文将边距和填充设置为0。
一些有助于形象化的图片：
适用于此尺寸：correct display
重叠并且在垂直收缩时不给予滚动条：incorrect display