顯示與另一個div相對位置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

最簡單的出路將取代你的CS s的下面的代碼：

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

檢查小提琴：http://jsfiddle.net/6gk0hybj/4/

提到另一種方法是評論可以在這裏找到：http://jsfiddle.net/6gk0hybj/5/

如果你想讓它更加動態，我們需要改變有點javascript。讓我知道你是否希望它變得更加動態