當導航欄為 position 時：已修復如何解決與其他組件重疊的問題？

Question

我想修復導航欄總是在頂部，所以我給了 position: fixed by css，但它與下面的組件重疊，導致我看不到內容的問題。 告訴我如何解決它。

例如 // 我給導航欄設置了不透明度

示例圖像

這是我的代碼

導航 css

.Navigation {
                display: flex;
                position: fixed;
                z-index: 9999999999;
                top: 0;
                left: 0;
                width: 100vw;
                box-sizing: border-box;
                padding: 20px 50px;
                justify-content: space-between;
                background-color: #eee;
                opacity: 0.33;
                flex: 1
            }

應用程序.js

                      <div className="App">
                      <Navigation />
                      <Home/>
                      <Blog/>
                      <Projects/>
                      <Contact/>
                      <Router/>
                      <GlobalStyles/>
                  </div>

Answer 1

這樣的造型

.navigation {
   .....
   height: 65px, % , em, rem;
}

.content-container {
   margin-top: 65px, % , em, rem;
   .....
}

像這樣包裝你的組件

<div className="app">
     <Navigation />
     <div className="content-container">
         <Home/>
         .......
        <GlobalStyles/>
     </div>
</div>