Display div direkt nach dem vorherigen, aber aus dem Fluss eines Dokuments

Question

Display div schreiben nach vorherigen (wie in Position: relativ) aber aus dem Fluss eines Dokuments - so wirkt es sich nicht auf andere div fließt und verhält sich wie Pop-up. Wie erreiche ich das?

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

Wie Sie auf Click sehen können, wird die colab-box umgeschaltet - aber da sie relativ positioniert ist, hat sie Platz und Störungen in der Reihenfolge der anderen Elemente verursacht. Wenn ich es absolut positioniere - dann weiß ich nicht genau, wo genau ich es brauche, um direkt nach dem "Zusammenarbeiten" -Knopf aufzutauchen.

Answer 1

Wenn der Code die anderen Elemente auf Ihrer Seite nicht beeinflussen soll, müssen Sie das Popup mit etwas wie "absolute" Position überlagern. Wenn Sie einen Container um die beiden Elemente legen und ihn auf eine relative Position setzen, können Sie das Popup als "absolut" festlegen und ihm einen bestimmten linken Wert zuweisen. Dies bedeutet, dass Sie eine feste Breite auf der Schaltfläche festlegen müssen.

$(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>