我怎样才能让 div 站在另一个元素（它下面的元素）的正上方？

Question

我想要 "Upload File" 和 "New Catalog" 这两个按钮位于文本 "Catalog path: Main" 的正上方，但位于搜索表单的右侧（如图所示） ).

放置 "margin top: 11em" 或类似的东西确实会使按钮移动到下方（这是我目前所做的）。但这并不能使网站看起来更好：当您在搜索表单上添加大量标签时，按钮都在同一个地方。或者，当您调整 window 的大小时，按钮会阻止搜索 "too much distance"。

这两个按钮放置在

中，这是位于右侧的搜索 table。在 "upload-buttons" 之后

这就是我在 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" 上尝试了 vertical-alignment 和 vertical-align 属性，但它们仍然停留在同一个地方。

如何使按钮保持在搜索表单的正上方（或几乎在 "catalog Path" 的正上方）但右侧，而不给按钮与上方任何元素的边距太大？

Answer 1

尝试使它们position: absolute并从顶部和左侧开始写特定的像素。

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

希望对您有所帮助。