By clicking a button we created a dynamic div using jquery .
$("#add-div").on('click',function(){
$(".new-div").after('<div class="new-div" style="z-index:1; position:absolute;" >message</div>');
});
Currently what happen is , in webpage a new-div is already there , when clicking on the add-div then other new-div is created . The problem is the all new-div's are over lapped. The message of one div is write over the message of other div .
How to solve this ?
I tried margin-righ:auto; margin-left:auto ;
Here i cannot change position:absolute .Here position:absolute
is a must one . So i am searching for a solution without changing position:absolute
Update : Please see this jsfiddle : https://jsfiddle.net/felixtm/pmcqj50j/1/
Thank you .