html - 导航栏固定在 div 的顶部

Question

我已经尝试了很多技术，但我似乎无法解决这个问题。 我希望我的菜单始终位于其父 div 的顶部。我做了一个Codepen我的布局。

这是我的菜单的 html 及其父菜单:

<div id="main-wrapper" class="background-yellow">
    <!-- center column -->
    <div id="center-wrapper">
        <nav id="navbar">
            <div id="navbar-wrapper">
                <ul id="main-nav">
                    <li>&Eacute;dito</li>
                    <li>Programme</li>
                    <li>Participants</li>
                    <li>Situation</li>
                    <li>&Agrave; propos</li>
                    <li>Infos</li>
                    <li>Newsletter</li>
                </ul>
            </div>
        </nav>
    </div>
</div>

这是他们的 CSS:

#main-wrapper {
  width: 100%;
  height: 100%;
}

#center-wrapper {
  position: absolute;
  left: 30%;
  width: 40%;
  height: 100%;
}

#navbar {
  position: absolute;
  width: 100%;
  height: 100px;
}

#navbar-container {
  position: fixed;
  z-index: 666;
}

#main-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

#main-nav li {
  display: inline-block;
  margin: 10px;
}

--编辑--
设法解决了这个问题，感谢 Zac.Ledyard，现在我需要 #navbar 成为它的父 div 的 100%，即 #center-wrapper。

提前谢谢你们。

Answer 1

您的一个 CSS id 选择器命名错误。将#navbar-container 更改为#navbar-wrapper

#navbar-wrapper {
  position: fixed;
  z-index: 666;
}