相对于另一个元素放置元素

Question

首先，这是小提琴的链接：https://jsfiddle.net/ad7vmhs1/

我想将搜索按钮$('#search-btn')放在搜索框$('#search-box')旁边。导航栏展开时，我希望搜索框位于中央，因此我将其设置为：

#search-btn {
  position: absolute;
}

但是现在search-btn不在我想要的位置。我查找了一些代码，这些代码会将$('#search-btn')的亲戚放在$('#search-box')的旁边，并得到了这样的内容：

window.pos = $('#search-box').position();
$('.navbar-toggler').on('click', function () {
    if (window.windowSize < 960) {
        $("#search-btn").css({
            position: "absolute",
            top: pos.top + "px",
            left: (pos.left + width + 10) + "px"
        })
    }
})

此代码似乎有效，除了导航栏折叠时无法正确捕获搜索框的位置。我该怎么办？

所需的输出：

上面的图片是我想要的-搜索框位于中央，搜索按钮位于其旁边。

如果我为position: absolute删除了“ $('#search-btn')”，则底部图像是输出。搜索框+搜索按钮的组合位于中间。

Answer 1

此处不需要Javascript。将搜索栏和搜索按钮放在相同的“公共父元素”中，然后仅使搜索按钮a[i]成为可能。搜索栏的大小将确定“公共父元素”的大小，而搜索按钮将绝对定位，始终浮动在“公共父元素”的侧面：

position: absolute

.menu {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
}
.option {
  position: relative;
  width: 200px;
  height: 30px; line-height: 30px;
  /* margin-left = width / -2 */
  left: 50%; margin-left: -100px;
  text-align: center;
}
.option.search > .search-bar {
  /* margin-top = (30 - height) / 2 */
  width: 200px; height: 26px; margin-top: 2px;
  border: none;
  box-shadow: inset 0 0 0 1px #000000;
  text-align: center;
  font-size: 100%;
}
.option.search > .search-btn {
  position: absolute;
  left: 100%; top: 50%;
  margin-left: 10px;
  width: 60px;
  /* margin-top = height / -2 */
  height: 30px; line-height: 30px; margin-top: -15px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #00a000;
  color: #00a000;
}

此布局几乎可以在任何合理的情况下使用。

Answer 2

更新：更接近您的更新请求：https://jsfiddle.net/ad7vmhs1/10/

我在CSS中使用了媒体查询并更新了HTML

<form class="form-inline my-2 my-lg-0 justify-content-center">
   <div class="search-container">
      <input id="search-box" class="form-control mr-sm-2 hidden" type="search" placeholder="Search by #tag" aria-label="Search">
      <button id="search-btn" class="btn btn-search btn-outline-success my-2 my-sm-0 btn-circle" type="button">Search</button>
   </div>
</form>

CSS：

// Choose your breakpoint. I'm setting 1000px as a demo
@media (max-width: 1000px) {
  .search-container{
    max-width: 250px;
    display: flex;
  }
  .search-container input{
    min-width: 250px;
  }
}

上一个答案：

只需删除搜索按钮的position: absolute

#search-btn {
  /* position: absolute; */
}

Answer 3

您可以在此类中简单地完成此操作

#search-btn {
  position: absolute;
  right: 80px;
  top: 162px;
}

这只是您网站的硬代码解决方案。