html - 将导航定位在具有重叠 div 的下标题边框上 (HTML/CSS)

问题描述

我正在尝试创建一个由三个 div 组成的简单网页：包含图像的标题 div、包含文本的内容 div 和包含导航元素和徽标的导航 div。我的目标是将标题 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>

目前 nav div 并没有保持在下边界的中心，我的在线研究到目前为止还没有带来任何有用的结果，所以如果有人有想法指出我正确的方向，我将非常感激！

标签： htmlcss

html - 将导航定位在具有重叠 div 的下标题边框上 (HTML/CSS)

问题描述

解决方案

推荐阅读