導航欄固定在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;
}

Answer 2

該方法很簡單。

Position：相對於父元素的位置Position：相對於子元素的絕對

這樣，子元素始終綁定到其父元素的頂部。

任何絕對定位的元素在最近的相對定位的父對象的坐標中都有一個位置（如果不存在-文檔本身）

從頁面代碼真的不清楚那里發生了什么，以及您想要實現什么。

要將元素綁定到-page-的頂部（不滾動），您需要使用position：fixed