1. 首页
  2. 问题列表
  3. 将导航定位在具有重叠div的下标头边框上（HTML/CSS）
提问者：小点点

将导航定位在具有重叠div的下标头边框上（HTML/CSS）


我试图创建一个由三个div组成的简单web页面:包含图像的header div，包含文本的content div和包含nav元素和徽标的nav div。 我的目标是将header div与nav div重叠，以便nav元素和徽标始终位于header div的下边框的垂直居中位置。

到目前为止，我的代码如下:

null

<!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>

null

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


共2个答案

匿名用户

希望这是你想要的:

nav img {
    margin-top: -40px;
}
#point1, #point2, #point3, #point4 {
    margin-top: -40px;
}

根据需要微调边距。

匿名用户

你能共享一个代码Pen或代码SandBox吗。 这样我就可以标记出你需要做的改变

相关问题