我正在尝试创建一个由三个div组成的简单网页：一个包含图像的标题div，一个包含文本的内容div和一个包含nav元素和徽标的navdiv。我的目标是将标题div 与导航div 重叠，以便导航元素和徽标始终垂直居中放置在标题div 的下边框中心。
这是我到目前为止的代码：
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
text-align: center;
}
#headerimage {
height: 100%;
width: 100%;
z-index: 50;
position: relative;
}
#headerimage > img {
max-width: 100%;
max-height: 100%;
border: 6px;
border-style: solid;
border-color: #671013;
}
#nav {
width: 100%;
overflow: visible;
top: 97.75%;
z-index: 100;
position: absolute;
}
#nav > img {
text-align: center;
vertical-align: middle;
margin-top: -6.2%;
height: 20%;
width: 20%;
}
.nav-element {
width: 10%;
height: 100%;
padding: 5px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-align: center;
font-weight: bold;
border: 4px;
border-style: solid;
border-color: #2d3139;
background-color: white;
color: #80857f;
}
.nav-element:hover {
background-color: #2d3139;
color: white;
cursor: pointer;
}
.left {
float: left;
z-index: 100;
}
.first {
margin-left: 3%;
}
.right {
float: right;
z-index: 100;
}
.last {
margin-right: 3%;
}
#point2 {
margin-left: 9%;
}
#point3 {
margin-right: 9%;
}
#content {
height: 100%;
width: 100%;
}
#text {
padding-top: 8%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 5%;
text-align: justify center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
</style>
</head>
<body>
<div id="headerimage">
<img src="https://images.pexels.com/photos/34577/pexels-photo.jpg" alt="Headerimage" />
<div id="nav">
<div id="point1" class="nav-element left first">
Point 1
</div>
<div id="point2" class="nav-element left ">
Point 2
</div>
<img src="https://pixabay.com/get/55e2d3454853a814f1dc8460da2932771736dfe6575074_640.png" alt="Logo" />
<div id="point3" class="nav-element right last">
Point 3
</div>
<div id="point4" class="nav-element right">
Point 4
</div>
</div>
</div>
<div id="content">
<div id="text">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</h1>
</div>
</div>
</body>
</html>目前，navdiv 并没有停留在下边界的中心，到目前为止，我的在线研究还没有带来任何有用的结果，所以如果有人有想法为我指出正确的方向，我将不胜感激！
希望这是你想要的：
nav img {
margin-top: -40px;
}
#point1, #point2, #point3, #point4 {
margin-top: -40px;
}
根据需要微调边距。