如何让一个div站在另一个元素（它下面的元素）的正上方？

Question

我想让 "上传文件 "和 "新目录 "这两个按钮站在 "目录路径.主 "文本的正上方，但要保持在搜索表单的右侧（就像图片中的样子）。主"，但留在搜索表单的右侧（就像图片中的样子）。

放一个 "margin top: 11em "或类似的东西确实会使按钮移动到下面（这是我目前所做的）。但这并不能使网站看起来更好：当你在搜索表单上添加了很多标签时，按钮就在同一个地方。或者当你调整窗口的大小时，按钮与搜索保持了 "太多距离"。

这两个按钮被放在<div id="upload-buttons>里面。在HTML文件中，在<div class="search">之后，就是站在右侧的搜索表。就在 "upload-buttons "之后的是<div class="proview>。"upload-buttons "和 "search "都放在<div id="container>中。

这是我在HTML代码中写的内容（这是一个Twig模板，但这和HTML没什么区别）。

          <div id="container">
          <div class="search">
{#              <p>Today's date is: {{ object.date|date("Y-m-d") }}</p>#}
      <table id="search-form">
              <form method = "get">
                  <tr>
              <th colspan="2">
                  <label>Search in file database </label>
              </th>
              <th colspan="2">
                  <label>Search by tags</label>
              </th>
                  </tr>
                  <tr>
                      <td>
                  <br><input type="search" name="query" placeholder="Search" maxlength="45">
                 <br><button type="submit" name="search" value="search">Search</button>
              </td>
              <td>
                      <label for="start">Start date range:</label>
                      <br><input type="date" id="from date" name="from-date"
                                 value=""
                                 min="2020-03-01" max="">
                  <br><label for="end">End date range:</label>
                  <br><input type="date" id="to date" name="to-date"
                             value=""
                             min="2020-03-01" max="">
              </td>
                      <td>
                      </td>
              </form>
              <form method = "get">
                  <td>
                      <br><input type="text" name="tags" data-role="tagsinput" placeholder="tag1,tag2,tag3">
                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                      <script src="{{ rel }}js/dist/bootstrap-tagsinput.min.js"></script>
                      <br><button type="submit" name="search" value="tagssearch">Search</button>
                  </td>
                  <td>
                  <input type="checkbox" name="andcondition" value="1">
                  Check if you want each file to include all tags (AND condition)
                  </td>
                  </tr>
              </form>
          </table>
              </div>
              <div id="upload-buttons">
                  <a href="{{rel}}file-upload/" class="button-white">Upload File</a>
                  <a href="{{rel}}new-catalog/" class="button-white">New Catalog</a>
              </div>
          </div>
          <div class="overview">

              <a id="catalogpath">
                  Catalog path: {{ catalogPath }}
              </a>

这是我在CSS中写的。

    #container {
        position: relative;
    }

search {
    float: right;
    width: 45em;
    height: fit-content;
    background: midnightblue;
    border-radius: 0.5em;
    padding: 1em;
    margin: 1em;
    display: inline-block;
}

#search-form table {
    vertical-align: top;
}


    #search-form td, #search-form tr, #search-form th{
        border-left: solid 0.5em transparent;
        border-right: solid 0.5em transparent;
    }

    /*FILES AND OVERVIEW*/

    #upload-buttons {
        display: inline-block;
        margin-top: 11em;
    }

    .overview {
        clear: both;
    }



    #catalogpath {
        font-size: 2em;
        color: gold;
        white-space: nowrap;
    }

我试着把 "upload-buttons "放在 "overview "里面。然后它就出现在目录路径的正上方，但它们就不会停留在搜索表单的左侧。

我试过在 "upload-buttons "和 "container "上设置垂直对齐和垂直对齐属性，但它们还是停留在同一个地方。

我如何才能使按钮保持在搜索表单的正上方（或几乎正上方的 "目录路径"）但右侧，而不给按钮太大的余量从任何元素上面？

Answer 1

试着让它们 position: absolute 并从顶部和左侧写入特定的像素。

position: absolute; 
top: ___px; 
left: ___px; 

我希望这能帮助你。