javascript - 在另一个 div 旁边显示相对位置的 div

Question

我想在另一个 div 旁边显示一个文本框，但它却出现在下方。文本框的位置必须是绝对的。这demo演示了这个问题。谢谢。

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;
}

html

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

js

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

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

Answer 1

最简单的方法是用以下代码替换您的 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;
}

检查 fiddle :http://jsfiddle.net/6gk0hybj/4/

提到的另一种方法是评论可以在以下位置找到:http://jsfiddle.net/6gk0hybj/5/

如果你想让它更动态，我们需要改变一点javascript。如果你想让它更有活力，请告诉我