Несколько всплывающих окон-дивов

[M-K]

Всем здрасте. Сразу хочу сказать, нужно решение без популярных библиотек и фреймворков. В общем как мне сделать, чтобы не 1 окошко всплывало (точнее DIV), а сколько угодно и они друг друга не перекрывали. Ну т.е. чтобы как на хабре примерно. Предположим пользователь 3 раза нажал "регистрация ать ашу" и у него вместо вывода одного всплывающего дива "Пароли не совпадают" произошло следующее:

1) Вывод первого всплывающего дива "Пароли не совпадают" (внизу справа страницы) [По истечению некоторого статичного интервала див должнен пропасть с глаз]
2) Сдвиг окошка повыше и вывод второго окошка на место первого с текстом "Пароли не совпадают" [По истечению некоторого статичного интервала див должнен пропасть с глаз]
3) Сдвиг первого окошка еще выше, а второго окошка на место первого и на пустом месте в самом низу - появление третьего дива [По истечению некоторого статичного интервала див должнен пропасть с глаз]

Вот текущий мой код (вывод одного и того же уведомления) на несколько секунд и последующее его скрытие (моя библиотека lib/notice.php):

<style type="text/css">
#notice {
    position: absolute;
    /* сверху справа */
    top: 0; 
    right: 0;
        
    width: 550px;
    height: 23px;
    margin:4px;        
    
    background: #006cff;
    color:#FFF;
    font-size:large;
    padding-top:12px;
    padding-bottom:12px;
    padding-left:10px;
    padding-right:10px;
    text-align:center;
    
    display:none;
}
</style>
<script type="text/javascript" language="JavaScript" >

function notify(text){
    document.getElementById('notice').innerHTML = text;
    document.getElementById('notice').style.display='block';
    setTimeout("document.getElementById('notice').style.display='none'", 3000);
}
</script>
<div id="notice"></div>

[spein]

<style type="text/css">
#notice {
    position: absolute;
    /* сверху справа */
    top: 0; 
    right: 0;
        
    width: 550px;
    height: 23px;
    margin:4px;        
    
    background: #006cff;
    color:#FFF;
    font-size:large;
    padding-top:12px;
    padding-bottom:12px;
    padding-left:10px;
    padding-right:10px;
    text-align:center;
    
    display:none;
}
</style>
<script type="text/javascript" language="JavaScript" >
function notify(text){
    document.getElementById('notice').innerHTML = text;
    document.getElementById('notice').style.display='block';
    setTimeout(function() {document.getElementById('notice').style.display='none'}, 3000);
}
</script>
<div id="show" onclick="notify('Shown!')">SHOW!!!</div>
<div id="notice">TEST</div>

Должно работать