直前のdivを表示しますが、ドキュメントの流れを取り除きます

Question

前の後にdivを書きますが（位置は相対的ですが）、ドキュメントの流れを取り去ります。現れる。それを達成する方法？

      *EDIT:* 

HTML

<a href="#" class="menu item colaborate">Colaborate</a> 
<div class="colab-box hide"> 
    <textarea rows="10" name="comment" class="colab-input"id="comment </textarea> 
    <button class="send-colab">Colaborate</button> 
</div><!--colab-box --> 

のjQuery：

$(document).ready(function() {  
    $('.colaborate').click(function(e) { 
     $('.colab-box').toggle(); 
     e.stopPropagation(); 
}); 
$(document.body).click(function() { 
    $('.colab-box').hide(); }); 
    $('.colab-box').click(function(e) { 
     e.stopPropagation(); 
    }); 
}); 

CSS：

.colab-box{ 
    position:relative; 
    top:0; 
    left: 76%; 
    border: 1px solid grey; 
    border-bottom-right-radius: 5px; 
    width:23%; 
    border-bottom-left-radius: 5px; 
    background:#fff; 
} 

クリックして表示されているように、colab-boxはトグルされていますが、相対的な位置関係にあるため、他の要素の順序やスペースを取ってしまいます。私がそれを絶対的な位置に置くならば、私は「Colaborate」ボタンの直後にポップアップする必要があるので、正確にどこを知るか分からない。

Answer 1

コードがページ内の他の要素に影響しないようにするには、「絶対」位置のようなものを使用してポップアップをオーバーレイする必要があります。 2つの要素の周りにコンテナを置き、相対的な位置を持つように設定すると、ポップアップを「絶対的」に設定し、それに特定の左の値を与えることができます。これは、ボタンに固定幅を設定する必要があることを意味します。

$(document).ready(function() { 
 
    $('.colaborate').click(function(e) { 
 
    $('.colab-box').toggle(); 
 
    e.stopPropagation(); 
 
    }); 
 
    $(document.body).click(function() { 
 
    $('.colab-box').hide(); 
 
    }); 
 
    $('.colab-box').click(function(e) { 
 
    e.stopPropagation(); 
 
    }); 
 
});

.container { 
 
    position: relative; 
 
} 
 
.menu.item.colaborate { 
 
    float: left; 
 
    width: 80px; 
 
    background: #ccc; 
 
} 
 
.colab-box { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 80px; 
 
    border: 1px solid grey; 
 
    border-bottom-right-radius: 5px; 
 
    width: 23%; 
 
    border-bottom-left-radius: 5px; 
 
    background: #fff; 
 
}

<div class="container"> 
 
    <a href="#" class="menu item colaborate">Colaborate</a> 
 
    <div class="colab-box hide"> 
 
    <textarea rows="10" name="comment" class="colab-input" id="comment"></textarea> 
 
    <button class="send-colab">Colaborate</button> 
 
    </div> 
 
    <!--colab-box --> 
 
</div>