当导航栏为 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>