我正在創(chuàng)建一個React.js應用程序，但這主要是一個CSS問題。

當我垂直調(diào)整窗口大小時，如何防止對象向上移動？每當你看一看大多數(shù)商業(yè)網(wǎng)站，每當窗口垂直縮小，沒有元素移動，相反，你得到一個滾動條只是滾動所有的內(nèi)容。我的問題是，當我的漢堡菜單出現(xiàn)在手機或更小的屏幕上時，菜單會向上移動，與我的導航條重疊。我該如何預防？

我的導航欄組件:

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;
   }

 }

我想我只是不確定哪個屬性會導致我的元素移動，或者應該使用哪個屬性來防止它？

我試著把我所有的內(nèi)容放在一個包裝器里，并給它一個固定的寬度，但似乎不起作用。我的正文的邊距和填充設置為0。

一些有助于形象化的圖片:

適合這種尺寸:正確顯示

垂直收縮時重疊且不顯示滾動條:顯示不正確

將logo和ul封裝在一個div標簽中，這樣在你的nav標簽中就有了兩個div標簽。在你的導航標簽樣式:顯示:伸縮，伸縮方向:列；