React-bootstrap / NavDropdown прячется под вещами под меню (перекрытие) - PullRequest
Новая
       41

React-bootstrap / NavDropdown прячется под вещами под меню (перекрытие)

0 голосов
/ 29 апреля 2020

NavDropdown прячется под вещами, которые содержат ползунок и тело или под меню. Я попробовал z-index: меньшее / большее число, чем mycontainer и DropN top ClassName. Даже этот раскрывающийся список не выходит на первый план, но он работает в адаптивном тесте мобильного экрана (в инструменте разработчика)

enter image description here

стиль. css

.drop-top {
z-index: 1000;
display: block;
position: static;
width: 100%;
color: #61dafb;
position: sticky;
top: 0;
}
.mycontainer{
  z-index: 101;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.tata {
  overflow: hidden;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  font-family:Helvetica, Arial, sans-serif, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14;

}

приложение. js

 <div className="mycontainer  tata">
                        <div className=" ">
                            <Navbar bg="transparent" className="container" expand="lg">
                                <Navbar.Brand>
                                    <div>
                                        <Link className="nav-link" to="/"> <img src={logo} alt="logo" height="63" width="221" to="/" /></Link>


                                    </div>
                                </Navbar.Brand>

                                <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
                                <Navbar.Collapse id="navbar-toggle" style={{ fontSize: 18, textAlign: "center", paddingTop: 35, }}>
                                    <Nav className="ml-auto" >
                                        <NavLink exact  className="nav-link" to="/">Home</NavLink>
                                        <NavDropdown exact title="Program-1" id="basic-nav-dropdown" className=" drop-top">
                                            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                            <NavDropdown.Divider />
                                            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                                        </NavDropdown>
                                        <NavLink exact className="nav-link" to="/program">Program</NavLink>
                                        <NavLink exact className="nav-link" to="/about">About</NavLink>

                                        <NavLink className="nav-link" to="/career">Career</NavLink>
                                        <NavLink exact  className="nav-link" to="/corporate">Corporate</NavLink>
                                        <NavLink exact  className="nav-link" to="/contact">Contact</NavLink>

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