在上一个之后显示div，但取消文档流

Question

显示 div 在上一个之后写入（如 position:relative）但取消文档流 - 因此它不会影响其他 div 流并且就像弹出窗口一样。如何实现？

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 已切换 - 但由于它是相对定位的，所以它占用了一些 space 并且打乱了其他元素的顺序。如果我将它定位为绝对 - 那么我将不知道确切的位置，因为我需要它在 'Colaborate' 按钮之后立即弹出。

Answer 1

如果您不希望代码影响页面中的其他元素，您需要使用类似 'absolute' 的位置来覆盖弹出窗口。如果您在这两个元素周围放置一个容器并将其设置为 'relative' 的位置，则您可以将弹出窗口设置为 'absolute' 并为其指定一个特定的左值。这意味着您必须在按钮上设置固定宽度。

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

在上一个之后显示div，但取消文档流

Display div right after previous, but take off of the flow of a document

css

display