jquery - 防止 div 在位置 :absolute div 重叠

Question

通过单击一个按钮，我们使用 jquery 创建了一个动态 div。

$("#add-div").on('click',function(){

$(".new-div").after('<div class="new-div" style="z-index:1; position:absolute;" >message</div>');

 });

目前发生的情况是，在网页中已经有一个 new-div，当点击 add-div 时会创建其他 new-div。问题是所有新的 div 都重叠了。 一个 div 的消息覆盖了另一个 div 的消息。

如何解决？

我试过 margin-righ:auto;左边距:自动； 在这里我不能改变 position:absolute 。这里 position:absolute 是必须的。所以我在不改变 position:absolute 的情况下寻找解决方案

Update : Please see this jsfiddle : https://jsfiddle.net/felixtm/pmcqj50j/1/

谢谢。

Answer 1

请试试这个 fiddle :https://jsfiddle.net/qqx1w1ef/4/

$("#add-div").on('click',function(){
      var last_element = $('body').find('.new-div:last');
      var position_top = last_element.offset().top + last_element.outerHeight() + 10;
      $(".new-div:last").after('<div class="new-div" style="z-index:1; position:absolute; top: '+position_top+'px;">message</div>');
});

我现在就做了，它使用了最后一个元素，并将它的位置 top + height 相加，再添加 10 个像素。

所以你得到了绝对位置，并且总是在最后一个元素上追加新的。

编辑 jsFiddle:https://jsfiddle.net/pmcqj50j/5/

要停止溢出，您可以使用以下 css(fiddle 也已更新):

.parent-div { max-width: 236px; width: 236px; position: relative; overflow: hidden; }