Verhindern div Überlappung in der Position: absolute div

Question

Durch einen Klick auf eine Schaltfläche haben wir eine dynamische div mit jQuery erstellt.

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

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

}); 

Zeit, was passiert ist, in der Homepage ein neu div schon da ist, wenn sie auf dem Add-div dann andere neue div erstellt werden klicken. Das Problem ist, dass alle neuen Divs überlagert sind. Die Nachricht von einem Div wird über die Nachricht von anderen Div geschrieben.

Wie löst man das?

Ich versuchte margin-righ:auto; margin-left:auto ; Hier kann ich nicht die Position ändern: absolute .Hier position:absolute ist ein Muss. So bin ich Suche nach einer Lösung ohne Position zu verändern: absolute

Update: Bitte lesen Sie diesen jsfiddle: https://jsfiddle.net/felixtm/pmcqj50j/1/

Danke.

Answer 1

Bitte versuchen Sie diese Geige: 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>'); 
}); 

ich es jetzt gemacht, und es nutzt letztes Element, und Suming es Position top + Höhe und das Hinzufügen von 10 mehr Pixel.

So erhalten Sie die absolute Position, und immer neu am letzten Element anhängen.

Edited jsFiddle: https://jsfiddle.net/pmcqj50j/5/

stoppen zu überfluten Sie folgende CSS verwenden könnte (Geige zu aktualisiert):

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

Answer 2

Lieber Fwlix, versuchen Sie diese

über umspült, weil Position : absolut
aber Sie wollen es .. also überprüfen Sie diese 'https://jsfiddle.net/4sm9dfs4/' Sie Höhe für neues Element gesetzt ....

Answer 3

Bitte überprüfen Sie diese Arbeits 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; 
}