Javascript 如何使用id/class将一个元素定位到其他元素旁边？

我想将搜索元素放在元素“媒体标题1”或“媒体标题2”的旁边，相对于其id/类别

<div class="content">
    <div class="media-item-1 col-md-8 col-sm-8 col-xs-8">
        <div class="media">
            <div class="media-body">
                <h4 class="media-heading">Media heading 1</h4>
                This is some sample text. This is some sample text. 
                This is some sample text. This is some sample text.
            </div>
        </div>
    </div>    
</div>

<div class="sidebar-second">
    <div class="form-item-search col-md-4 col-sm-4 col-xs-4">
      <label for="search">Search</label>
      <input type="text" id="search"  size="15" maxlength="60">
    </div>
</div>

例如：

考虑一下，我有一个类为“media-item-1”的元素，我想通过使用its类“media-item-1”将搜索div放在该元素旁边。将来它应该是动态的，我想通过更改目标元素id/类来更改位置

<div class="content">
    <div class="media-item-1 col-md-8 col-sm-8 col-xs-8">
        <div class="media">
            <div class="media-body">
                <h4 class="media-heading">Media heading 1</h4>
                This is some sample text. This is some sample text. 
                This is some sample text. This is some sample text.
            </div>
        </div>
    </div>    
</div>

<div class="sidebar-second">
    <div class="form-item-search col-md-4 col-sm-4 col-xs-4">
      <label for="search">Search</label>
      <input type="text" id="search"  size="15" maxlength="60">
    </div>
</div>

媒体标题1
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
搜寻

使用bootstrap/jquery有什么方法可以做到这一点吗

---

下面是

中的代码，下面是一个示例。根据指定的id设置元素的div top

  <div class="sidebar-second" style="position:absolute;">
    <div class="form-item-search col-md-4 col-sm-4 col-xs-4" style="width: 250px;">
      <label for="search" style="float:left;" >Search</label>
      <input type="text" id="search"  size="15" maxlength="60" style="float:left;">
    </div>
  </div>

 </div>
 <div><input type="button" value="SetMe" id="setme" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"></div> 
 </div>

<script>
$( "#setme" ).click(function(){
   var setbutton = $( ".media-item-1" );
   var position = setbutton.position();
   $(".sidebar-second").css({top: position.top, left: 200, position:'absolute'});
});
</script>

搜寻
$（“#setme”）。单击（函数（）{
变量设置按钮=$（“.media-item-1”）；
var position=setbutton.position（）；
$（“.sidebar second”）.css（{top:position.top，左：200，position:'absolute'}）；
});

试试这个：

---

将两个div相邻放置的简单示例

#类别1{
宽度：200px；
高度：200px；
背景：#f0；
}
#类别2{
位置：绝对位置；
顶部：10px；
左：220px；
宽度：200px；
高度：200px；
背景：红色；
}

Div1
Div1

根据您的

媒体标题1

元素使用jquery更改搜索框的左上角，它将被放在该元素旁边