Javascript 显示与另一个div相邻的相对位置的div

我想在另一个div旁边显示一个文本框，但它显示在下面。文本框的位置必须是绝对的。这说明了这个问题。多谢各位

css

#show{
   border:1px solid gray;
   cursor:pointer;
   float:left; 
}

#textBox{
      display:none;
      position:absolute;
      border:1px solid gray;
      width:100px;
      height:100px;
      float:left;
      background-color:pink;
}

#hide{
     clear:left;
     cursor:pointer;
     text-align:center;
}

$('#show').click(function(){
  $('#textBox').show();
});

$('#hide').click(function(){
  $('#textBox').hide();
});

html

<div id = "show">click me to show test box</div>
<div id = "textBox">text</div>
<div id = "hide">hide text box</div>

---

最简单的解决方法是用以下代码替换css：

#show{
       border:1px solid gray;
       cursor:pointer;
       float:left; 
}
#textBox{
          display:none;
          position:absolute;
          border:1px solid gray;
          width:100px;
          height:100px;
          margin-left:165px;
          background-color:pink;
}
#hide{
         clear:left;
         cursor:pointer;
         text-align:center;
         margin-left:76px;
}

检查小提琴：

另一种方法是可在以下网址找到注释：

---

如果您想让它更具动态性，我们需要更改一点javascript。如果您想让它更具动态性，请告诉我

如果您需要元素的位置是绝对的，只需将其放置在您想要的位置并移除浮动即可。同一元素上不需要这两个属性。您只需添加一个顶部和左侧位置。