css - 拥有位于 React 中的英雄部分的透明导航栏的最佳方法？

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%。

关于如何在不使用负边距的情况下创建位于英雄部分顶部的导航栏的任何想法？

标签： cssreactjsstyled-components

Answer 1

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