Html 当导航栏设置为'；位置：绝对位置'；

我正在尝试将导航栏设置为

位置：绝对

这样它在展开html时不会使html向下移动。但当我这样做时，导航下方的div向上移动并覆盖导航栏

html:

这是我的代码笔链接：

---

尝试复制粘贴整个css，如果可行，我将解释我所做的更改及其原因

演示：

.navbar{
位置：相对位置；
排名：0；
z指数：10；
宽度：100%；
边框：1px纯白
}
身体{
背景色：#000101；
字体系列：“蒙特塞拉特”，无衬线；
}
导航a{
颜色：#00253f！重要；
}
导航按钮{
背景色：#00253f！重要；
大纲：无！重要；
}
#主柱{
排名：0；
位置：绝对位置；
边界半径：0！重要；
填充：0；
宽度：自动；
背景色：黑色；
边框：1px纯黄色；
}
#主jum img{
宽度：100%；
高度：700px；
不透明度：0.5；
}
导航按钮：悬停{
背景色：#003a3f！重要；
}
导航a：悬停{
颜色：#003a3f！重要；
}
#能力img{
宽度：30vmin；
}
#细节{
边缘顶部：100px；
边缘底部：150px；
}
#能力{
边缘底部：300px；
}
p{
字体大小：20px；
颜色：#00253f；
}
a:悬停{
文字装饰：无；
}
页脚{
利润上限：190px；
}
h4{
字体大小：6vmin；
颜色：#003a3f；
}
.对{
浮动：对；
}
.左{
浮动：左；
}
@介质（最大宽度：768px）{
#能力img{
显示：块；
保证金：0自动；
最大宽度：100%；
宽度：50vmin；
}
#主柱{
显示：块；
}
.col-sm-4{
边缘顶部：25px；
}
p{
字体大小：3.5vmin；
}
#能力{
边缘底部：30px；
}
}

关于我
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯先生，我的生命是有限的。不要吃火鸡。库拉比图尔·艾尔内克、菲尼布斯·韦利姆、拉奥里特·斯克利里斯克·利古拉。在普尔维纳尔的奥古斯大教堂举行婚礼。乌拉姆科珀精英队，阿利奎特安特ac队，马克西姆斯乌尔纳队。塞德·尼斯勒·欧马萨·佩伦茨克。欧洲东部的佩伦特式非正义自由主义者朗卡斯·波苏尔。Maecenas eu fringilla orci，eu porta ex

更多
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯先生，我的生命是有限的。不要吃火鸡。库拉比图尔精英内克

保留所有权利

测试
变量日期=新日期（）；
var fullYear=date.getFullYear（）；
var yearElement=document.getElementById（“年”）；
yearElement.innerHTML=fullYear+'©；'；
window.sr=ScrollReveal（）；
高级揭示（“#关于”{
期限：2000年，
来源：'底部'，
视野系数：0.9，
距离：'300px'，
重置：正确
});
高级揭示（“#主要主体”{
不透明度：0，
期限：2000年，
重置：正确，
视野系数：0.6
});
高级揭示（“#更多”{
期限：2000年，
来源：'底部'，
视野系数：0.9，
距离：'300px'，
重置：正确
});
高级揭示（“#代码img”{
期限：2000年，
来源：'底部'，
视野系数：0.9，
距离：'300px'，
重置：正确
});
高级揭示（“#响应性img”{
期限：2000年，
来源：'底部'，
视野系数：0.9，
距离：'300px'，
重置：正确
});
高级展示（“#设计img”{
期限：2000年，
来源：'底部'，
视野系数：0.9，
距离：'300px'，
重置：正确
});

正常，因此

z-index:10

修复了我的代码，这就是我试图得到的结果。我应该听完整的指令，但我忽略了

z-index:10这就是问题的原因

.navbar {
  position: absolute;
  top : 0;
  z-index: 10;
  width: 100%;
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}


nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  border-radius: 0!important;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: Black;

}

#main-jum img {
  width: 100%;
  height:auto;
  opacity: 0.5;
}

nav button:hover {
  background-color: #003a3f!important;
}

nav a:hover {
  color: #003a3f!important;
}

#abilities img {
  width: 30vmin;

}

#details {
  margin-top:100px;
  margin-bottom: 150px;
}

#abilities {
  margin-bottom: 300px;
}

p {
  font-size: 20px;
  color:    #00253f;
}

a:hover {
  text-decoration: none;
}

footer {
  margin-top: 190px;
}

h4 {
  font-size: 6vmin;
  color: #003a3f;
}

.right {
  float: right;
}

.left {
  float: left;
}

@media (max-width: 768px) {
  #abilities img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
    width: 50vmin;
  }

  #main-jum {
    display: block;
  }
  .col-sm-4 {
    margin-top: 25px;
  }

  p {
  font-size: 3.5vmin;
}

  #abilities {
    margin-bottom: 30px;
  }

  #main-jum img {
    max-width: 100%;
    min-height: 400px;
    object-fit:cover;
  }

}

你能把你的输出截图吗？这是完整的代码等待第二个白色边框，这样我就可以看到.navbar区域。如果您想在about me和.navbar'位置：relative；'之间留出一些空间，您可以给
边距顶部
无法解决我的问题，现在它将div推到它下面。您完全可以删除“位置”，结果也是一样的。我将其设置为“位置：绝对；”所以当我在这里看到它时，它不会向下推图像：。它在我正在处理的另一页上起作用，但由于某种原因，我在这一页上有问题。所以你想把那个图像和关于我的div重叠吗？
.navbar {
  position: absolute;
  width: 100%;
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}


nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  border-radius: 0!important;
  padding: 0;
  width: auto;
  background-color: Black;

}

#main-jum img {
  width: 100%;
  opacity: 0.5;
}

.navbar {
  position: absolute;
  top : 0;
  z-index: 10;
  width: 100%;
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}


nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  border-radius: 0!important;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: Black;

}

#main-jum img {
  width: 100%;
  height:auto;
  opacity: 0.5;
}

nav button:hover {
  background-color: #003a3f!important;
}

nav a:hover {
  color: #003a3f!important;
}

#abilities img {
  width: 30vmin;

}

#details {
  margin-top:100px;
  margin-bottom: 150px;
}

#abilities {
  margin-bottom: 300px;
}

p {
  font-size: 20px;
  color:    #00253f;
}

a:hover {
  text-decoration: none;
}

footer {
  margin-top: 190px;
}

h4 {
  font-size: 6vmin;
  color: #003a3f;
}

.right {
  float: right;
}

.left {
  float: left;
}

@media (max-width: 768px) {
  #abilities img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
    width: 50vmin;
  }

  #main-jum {
    display: block;
  }
  .col-sm-4 {
    margin-top: 25px;
  }

  p {
  font-size: 3.5vmin;
}

  #abilities {
    margin-bottom: 30px;
  }

  #main-jum img {
    max-width: 100%;
    min-height: 400px;
    object-fit:cover;
  }

}