Как разместить компонент React под панелью навигации (чтобы панель навигации не перекрывала его)?

Question

Я пытаюсь создать приложение React 16.13.0, которое оформлено довольно просто - панель навигации вверху и компонент внизу ...

  return (<Router>
    <div className="App">
      <Flash />
      <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
          <Link className="navbar-brand" to={"/add"}>Chicommons</Link>
          <NavBar />
        </div>
      </nav>

      <div className="auth-wrapper">
        <div className="auth-inner">
          <Switch>
            <Route exact path='/' component={Add} />
            <Route path="/add" component={Add} />
            <Route path="/search" component={Search} />
          </Switch>
        </div>
      </div>
    </div>
    </Router>
  );

У меня есть создал следующие стили для разных разделов ...

.navbar-light {
  background-color: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

.auth-inner {
  width: 450px;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
}

Однако панель навигации перекрывает компонент. Демо-версию можно увидеть здесь - http://prod.chicommons.coop или этот снимок экрана

Как мне настроить параметры, чтобы мои компонент отображается под панелью навигации и полностью виден (нормально, если вам нужно прокручивать)?

Answer 1

используйте position: sticky; вместо position: fixed; в этом классе .fixed-bottom, .fixed-top

Answer 2

Тот факт, что у вас есть position: fixed на вашей панели навигации, ваш auth-wrapper элемент DOM начинается сверху

Для них теперь есть несколько решений в зависимости от того, как вы хотите, чтобы ваша панель навигации вела себя

Поскольку вы хотите, чтобы панель навигации оставалась наверху и не прокручивалась вместе с остальной частью DOM, вы можете сделать это position: sticky вместо position: fixed и добавить небольшой отступ к authWrapper, чтобы оставить достаточно места на наверх

Поскольку сейчас вы используете bootstrap class fixed-top. Я предлагаю вам заменить его своим собственным классом

 <nav className="navbar navbar-expand-lg navbar-light navbar-fixed-top">
    <div className="container">
      <Link className="navbar-brand" to={"/add"}>Chicommons</Link>
      <NavBar />
    </div>
  </nav>


.navbar.navbar-fixed-top {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
}

.auth-wrapper {
  padding-top: 2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

, однако приведенное выше решение приведет к тому, что ваша панель навигации будет выглядеть неуместно при прокрутке до конца страницы

Лучшее решение здесь можно было бы использовать position: fixed вместо position: sticky и добавить padding-top или top css к auth-wrapper

.navbar.navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.auth-wrapper {
  padding-top: 6rem; // enough space towards the top to be not overlapped by navbar
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

Answer 3

вы присвоили своему навигатору фиксированный высший класс. это заставит его перекрывать все (как будто у него нет высоты для других элементов). Удалите класс fixed-top, а затем, если хотите, добавьте его на панель навигации после прокрутки, чтобы он оставался наверху, когда пользователь прокручивает вниз. (Вы также можете сделать форму небольшим отступом, чтобы она не прилипала к вашему навигатору и становилась более красивой.)

Answer 4

Вам необходимо изменить свойство position из файла scss / utilities / _position.s css. Это может быть позиция: липкая или позиция: начальная или что угодно, кроме абсолютного или относительного.

например: -

.fixed-bottom, .fixed-top {
position: initial;
right: 0;
left: 0;
z-index: 1030;
}