最好的方式有透明的导航栏，这是定位在反应英雄部分？

Question

我有一个导航栏组件，它位于我的英雄部分的上方。我的问题是，如果我使背景透明，它将只是白色，而不是在我的英雄形象的顶部。

现在它看起来像这样

​

以下是导航栏的代码

      export const Nav = styled.nav`
        background: transparent;
        height: 80px;
        display: flex;
        justify-content: space-between;
        padding: 0.5rem calc((100vw - 1000px) / 2);
        z-index: 10;
      `;

在我的App.js中，导航栏只是堆叠在英雄部分的顶部

           function App() {
        return (
          <Router>
            <Navbar />
            <Hero />
          </Router>
        );
      }

因此，无论发生什么，它都将始终位于顶部。

我找到的唯一选择是添加

margin-top: -80px到我的英雄部分，但我觉得有更好的方法来做到这一点。

​

​

负边距基本上起到了作用，你可以看到导航栏在英雄图像上，但现在我失去了英雄部分的-80px，它没有显示完整的100%。

如何在不使用负边距的情况下创建一个位于主人公区域顶部的导航栏，您有什么想法吗？

Answer 1

试试这个。在你的英雄部分，保留margin-top: -80px而不是height: 100%；告诉我它是否有帮助