如何在旋转木马顶部制作导航栏？

Question

我最近刚刚在我的投资组合网站上添加了一个轮播。但是，当我向下滚动时，旋转木马与导航栏重叠（它在它的顶部）。

我的代码

Navbar.js:

...
return (        
    <nav class="header">
      <ul class="list">
        <li className='item'>
          <Link to="/">Home</Link>
        </li>
        <li className='item'>
          <Link to="/about">About</Link>
        </li>
        <li className='item'>
          <Link to="/projects">Projects</Link>
        </li>
        <li className='item'>
          <Link to="/contact">Contact Me</Link>
        </li>
      </ul>
    </nav>
)

Navbar.css:

.header {
    position: sticky;
    top: 0;
    display: flex;
    list-style-type: none;
    background-color: #3D405B;
    width: 100%;
}
...

Home.js

const skills = DataSkills.map(skill => {
    return <Card
        key={skill.id}
        skill={skill} />
})

const responsive = {
    superLargeDesktop: {
        breakpoint: { max: 4000, min: 3000 },
        items: 5
    },
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 4
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 2
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1
    }
};

return (
    <Carousel responsive={responsive} className='home--skills-list'>
        {skills}
    </Carousel>
)

Home.css:

.home--skills-list {

}

None 的其他卡片、图像和文本与导航栏重叠，只是轮播。既然是这样，我假设我不必更改导航栏中的任何内容，而只需更改轮播（如果我错了，请纠正我）。我该怎么做才能让轮播不与导航栏重叠？

如有任何帮助，我将不胜感激！

Answer 1

所以，如果我没理解错的话，你希望导航栏位于轮播上方，对吗？如果是这样，您应该为导航栏设置一个 z-index，使其高于轮播的 z-index。因为一个元素的 z-index 越高，它就会显得越高（在前景中越多）。

.header{
...
z-index: 1000;

}

然后在旋转木马上有一个 z-index 小于那个。但我不确定那是否有必要。如果是这样的话，我可能误解了问题，那么我很乐意提供帮助:)

Answer 2

我想你想要带粘性的轮播导航顶部。如果是这样，您可以使用 react-bootstrap。您可以轻松地使用粘性

进行导航

如何在旋转木马顶部制作导航栏？

How to Make Navigation bar on top of carousel?

css

reactjs

carousel

navigationbar