我无法用 CSS 修复我的导航栏

Question

我需要有关我一直在从事的项目的代码方面的帮助。我无法固定我的导航栏，所以它总是出现在视口的顶部。我了解 CSS 位置的规则，并且一直在查看示例和教程，但由于某种原因，我被卡住了。

我尝试将导航栏的位置固定为相对于容器的位置，以及许多其他更改。我尝试的每一件事，都会弄乱我的内容。我想这是你需要帮助的时刻之一。

这是项目的链接和导航栏的代码，没有任何位置规则。

https://codepen.io/aitormorgado/pen/MWayXPy

#title-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Aclonica", serif;
  color: #281c1c;
  font-size: 6rem;
  text-transform: uppercase;
  margin: 3rem 1rem;
}

li {
  list-style: none;
}

#header-img {
  width: 6rem;
  padding-right: 1.5rem;
}

#nav-bar ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Libre Baskerville", serif;
  background-color: #990000;
  color: #e0e0e0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  text-transform: uppercase;
  font-size: 4rem;
}

#nav-bar ul li {
  border: 2px solid black;
  width: 100%;
  text-align: center;
}

#nav-bar ul li a {
  text-decoration: none;
  color: inherit;
  padding: 1.4rem;
  display: block;
}

#nav-bar ul li:hover {
  background: #cc3300;
}

一百万感谢您的帮助！

Answer 1

根据您的问题，我只是在您的代码中更改了一个小东西，现在您的标题在滚动时固定在顶部，

你需要做的就是使用

#header {
    position: sticky;
    top: 0;
    z-index: 99999;
    background-color: #E0E0E0;
}

在您的标题上。并给出背景颜色，以便滚动时其余的底部元素不会出现在其下方， 如果需要其他内容，或者我没有理解您的问题，请随时分享。 只需在此处查看codepen。