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

- EDIT--
管理来解决这个问题，感谢Zac.Ledyard，现在我需要#navbar成为它的父div的100％，即#center-wrapper。

先谢谢你们。

Answer 1

您的一个CSS ID选择器名称错误。将＃navbar-container更改为＃navbar-wrapper

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

Answer 2

方法很简单。

位置：父元素的相对值位置：子元素的绝对值

这样，子元素总是绑定到它的父元素的顶部。

任何绝对定位元素在最近的相对定位父元素的坐标中有一个位置（如果不存在 - 文档本身）

从您的网页代码中可以清楚地知道那里发生了什么，以及您正在努力实现的目标。

要将元素绑定到-page-的顶部（不要用它滚动），你需要使用position：fixed

Navbar固定在div的顶部

2 个答案: