CSS滑动与粘性顶部菜单栏重叠

Question

逻辑是在滚动时粘贴菜单栏第二个 div，其他 div 应该放在粘性菜单栏下。但是这里只有第 3 个 div 滑动横幅与粘性重叠，其他的工作正常。

有人可以帮忙解决这个问题吗？

所有 div 都在 react Router 内。

CSS

  .sticky {
      width: 100%;
      height: 75px;
      color: #61dafb;
    background-color: blue;
      position: sticky;
      top: 0;
      }
    .slider-main {
        width: 100%;
        height: 500px;
        overflow: hidden;
        position: relative;
        background-image: url(../images/slide_1.jpg);
        background-repeat: no-repeat;
        background-size: cover;

        animation: slide 10s infinite;
      }
      @keyframes slide {
        0%{
          background-image: url(../images/slide_1.jpg);
          width: auto;
          height: 500px;
        }
        26%{
          width: auto;
          height: 500px;
          background-image: url(../images/slide_2.jpg);

        }
       67%{
        width: auto;
        height: 500px;
          background-image: url(../images/slide_3.jpg);
        }

      }
    /* slider text 1*/
    .tx-anim-1{
      width: 457px;
      height: 76px;
      margin: auto;
      background-image: url(../images/slider-tx-bg.png);

      text-align: center;
      color:yellow;
      font-size: 50px;
      position: relative;
      animation: mymove1 4s ;
      animation-delay: 2s;
      animation-fill-mode: both;
    }

    @keyframes mymove1 {
      from {top: -10%;}
      to {top: 64%;}
    }
    /* slider text 2*/
    .tx-anim-2{
      width: 457px;
      height: 35px;
      margin-top: 320px;
      text-align: center;
      background-image: url(../images/slider-tx-bg.png);
      color: #54ff00;
      font-size: 22px;
      position: relative;
      animation: mymove2 4s ;
      animation-delay: 2s;
      animation-fill-mode: both;

    }

    @keyframes mymove2 {
      from {left: -30%;}
      to {left: 35%;}
    }
    /* slider text 3*/
    .tx-anim-3{
      width: 550px;
      height: 35px;
     margin-top: 150px;
      margin-left: 32%;

      background-image: url(../images/slider-tx-bg.png);
      text-align: center;
      color:yellow;
      font-size: 18px;
      position: relative;
      animation: mymove3 4s ;
      animation-delay: 2s;
      animation-fill-mode: both;
    }

    @keyframes mymove3 {
      from {bottom: 0%;}
      to {bottom: 30%;}
    }

第一格

            <div>
                <div>
                    PU AMD AM4 Socket for AMD Ryzen/ AMD Ryzen 2nd Generation/Ryzen with Radeon Vega Graphics/Ryzen 1st
                    Generation/7th Generation A-series/Athlon X4/Athlon Processors Supports CPU up to 8 cores. The maximum memory frequency
                </div>
            </div>

第二格

         <div className="mycontainer sticky">
                <Navbar className=" site-bg  " expand="lg">
                    <Navbar.Brand>
                        <div>
                            <img src={logo} alt="logo" width="200" />
                            {/*   <img src={process.env.PUBLIC_URL + "./images/logo.png"} alt="mypic" width="200" /> */}
                        </div>
                    </Navbar.Brand>

                    <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
                    <Navbar.Collapse id="navbar-toggle" bsStyle="tabs" style={{ marginTop: 30 }}>
                        <Nav className="ml-auto">
                            <Link className="my-navbar" to="/">Home</Link>
                            <Link className="my-navbar" to="/about">About</Link>
                            <Link className="my-navbar" to="/services">Services</Link>
                            <Link className="my-navbar" to="/contact">Contact</Link>
                            <Link className="my-navbar" to="/galleries">Galleries</Link>

                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>

第三格

<div className="slider-main">
            <div className="tx-anim-1">
                <div>
                    Decor and Event
                </div>
            </div>
            <div className="tx-anim-2">
                <div style={{ paddingTop: 5 }}>
                    A management Company
                </div>
            </div>
            <div className="tx-anim-3">
                <div style={{ paddingTop: 5 }}>
                    We promise you the best Deal with full Satisfaction.
                </div>
            </div>

        </div>

第四格

            <div style={{ paddingTop: 50 }}>
                <Route defaultActiveKey="/home" path="/" exact render={() => <HomePage title={this.state.home.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />} className="container-full" />
                <Route path="/about" render={() => <AboutPage title={this.state.about.title} subTitle={this.state.about.subTitle} text={this.state.about.text} />} />
                <Route path="/services" render={() => <ServicesPage title={this.state.services.title} />} />
                <Route path="/contact" render={() => <ContactPage title={this.state.contact.title} />} />
                <Route path="/galleries" render={() => <GalleriesPage title={this.state.galleries.title} />} />
                <Footer />
            </div>

Answer 1

这是z-index的问题，你可以用CSS轻松管理它。只需在您的类上添加下面的 CSS 属性，您的问题就会得到解决，记住我添加了 background-color，因为它显示，除了滑块都从粘性菜单中进入。

.mycontainer{
    z-index: 100;
    background-color: skyblue;
}

.slider-main {
    z-index: 101;
}