如何在導航欄下方 position 我的 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>
  );

我為不同的部分創建了以下 styles ...

.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;
}

但是，導航欄與組件重疊。 Demo可以看這里——http://prod.chicommons.coop ，或者這個截圖

如何進行調整以使我的組件顯示在導航欄下方並且完全可見（如果必須滾動也可以）？

Answer 1

您需要從文件scss/utilities/_position.scss更改position屬性。 它可以是position:sticky或position:initial或除絕對或相對之外的任何內容。

例如：-

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

Answer 2

您擁有position: fixed在您的導航欄上，您的auth-wrapper DOM 元素從頂部開始

現在有多種解決方案，具體取決於您希望導航欄的行為方式

由於您希望導航欄貼在頂部而不是使用 DOM 的 rest 滾動，因此您可以將其設為authWrapper position: sticky而不是position: fixed並在頂部添加足夠小的填充空間：

由於您現在使用的是bootstrap class fixed-top 。 我建議你用自己定制的 class 替換它

 <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

您已將固定頂部 class 提供給您的導航。 它會導致它重疊所有東西（就像它沒有其他元素的高度一樣）。 移除固定頂部的 class，然后如果需要，在滾動后將其添加到導航欄，這樣當用戶向下滾動時它會粘在頂部。 （你也可以給你的表格加一點邊距，這樣它就不會粘在你的導航上，變得更漂亮。）

Answer 4

使用position: sticky; 而不是position: fixed; 在此 class .fixed-bottom, .fixed-top