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的消息上。

如何解决这个问题？

我试过margin-righ:auto; margin-left:auto ; 在这里，我无法改变立场：绝对。这里position:absolute是必须的。所以我在不改变位置的情况下寻找解决方案：绝对

更新：请看这个jsfiddle： https://jsfiddle.net/felixtm/pmcqj50j/1/

谢谢。

Answer 1

请尝试这个小提琴：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>');
});

我现在就做了，它使用了最后一个元素，并将它的位置加到顶部+高度，再添加10个像素。

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

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

要停止溢出，您可以使用以下css（小提琴也更新）：

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

Answer 2

亲爱的Fwlix，试试这个

因为位置：绝对的重叠但你想要它.. 所以检查一下 'https://jsfiddle.net/4sm9dfs4/' 你必须为新元素设置高度....

Answer 3

请检查此工作Demo - jsfiddle

HTML

<div class="col-sm-12">
  <input type="button" id="add-div" value="Add Div" />
  <br/><br/>
 </div>

 <div class="col-sm-12">
  <div class="bord">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
  </div>
 <div class="parent-div">
   <div class="new-div">
       message
   </div>
  </div>
 </div>

JS

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

$(".new-div").after('<div class="new-div">message</div>');

});

CSS

.parent-div{
  position: absolute;
    top: 7%;
    left: 10%;
    overflow: hidden;
    height: 85%;
}
.bord{
    position: relative;
    overflow: hidden;
}

防止div在位置上重叠：绝对div

3 个答案: