Question

好吧，首先要做的是。我在页面顶部有一个导航栏，并且已将其position属性设置为fixed，以便它始终保持在屏幕上。问题是，一旦我做完，它下面的div就向上移动到nav元素下面。

我已经搜索了有关此主题的内容，仅找到涉及将以上div的position属性设置为相对的解决方案。但是这样做的话，导航栏不会停留在该位置，而是在向下滚动时随页面的其余部分一起移动。

这是代码：

* {
  padding: 0;
  margin: 0;
}

.nav-bar {
  position: fixed;
  overflow: hidden;
  width: 90%;
  height: 30px;
  background: #006666;
  z-index: 1;
  color: #fff;
}

.content {
  position: relative;
  background: #aaa;
  color: #fff;
}

<body>
  <nav class="nav-bar">Navigation bar</nav>

  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.</div>
</body>

我尝试了两种元素位置的不同组合，但没有一种能按我的意愿工作。

这是小提琴：https://jsfiddle.net/e1nbxj8v/

Answer 1

添加padding-top:30px中的.content

.content {
  position: relative;
  background: #aaa;
  color: #fff;
  padding-top:30px;
}

https://jsfiddle.net/lalji1051/yafeu1x7/

Answer 2

我建议您使用一个非常简单的CSS网格：

grid-template-rows: 30px calc(100vh - 30px);

* {
  padding: 0;
  margin: 0;
}

.nav-bar {
  width: 90%;
  height: 100%;
  background: #006666;
  color: #fff;
}

.content {
  background: #aaa;
  color: #fff;
  height: 100%;
  overflow: auto;
}

body {
  display: grid;
  grid-template-rows: 30px calc(100vh - 30px);
}

<body>
  <nav class="nav-bar">Navigation bar</nav>

  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.</div>
</body>

Answer 3

您是否考虑过将margin-top: 30px;添加到内容中并进行导航top: 0;吗？

https://jsfiddle.net/dv7pyh92/1/

如何阻止两个元素垂直重叠？

3 个答案: