html - 如何在绝对的情况下使此菜单随页面移动

Question

我正在制作的导航栏应该触摸屏幕的边缘，所以这就是我到目前为止所拥有的。CSS：

nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height:65px;
  display: block;
  background-color: #1abc9c;
}

但是，我希望它能够在您向下滚动时与页面保持一致，不幸的是，如果不从绝对位置更改位置，我无法弄清楚如何做到这一点；这不起作用，因为它使菜单栏不接触屏幕边缘。

score 1 · Accepted Answer

使用position: fixed;代替position: absolute;并将宽度设置为 100%。

编辑

您需要将您的 html<nav>放在代码的底部，并且所有其他代码最好在您的演示中用 div 包装，我已将其包装并将其<div class="main"> 定位为相对并设置最高值。

score 0 · Accepted Answer

由于我没有任何 HTML 可以关闭，我只是在黑暗中拍摄。

如果 nav 位于相对定位的任何其他元素内部，则具有绝对位置的子元素将被困在其中。如果是，请尝试将 HTML 移到任何包含元素之外。

此外，您不能将元素定位在绝对左侧和绝对右侧。列表中最低的属性将优先于前一个。你只需要一个。如果你想要 100% 的宽度，只需添加“width:100%;”。

2 回答 2