CSS tekrarlanan elemanlarda pozisyon | Cevap #10068

merhaba,
sweetalert benzeri kendi bildirim sistemimi oluşturuyorum, kullanımıma uygun çeşitli tasarımlar yaptım. son yaptığım tasarımda ise, hızlı işlem gerçekleşebilen bir olay mevcut, dolayısıyla arka arkaya bildirim gelebiliyor. her neyse, bildirim sağ altta gözüküyor, position absolute olduğu için ardışık elementlerde üst üste geliyor. sorunu çözmek için kapsayıcı belirleyip, içerisine aldığı elementlere css kurallarını uyguladığım birkaç şey denedim. bu seferde pozisyon konusunda sorun yaşadım. kapsayıcıyı silip normal haliyle bir sorayım dedim, olmadı javascript ile divin yüksekliğini hesaplayıp daha sonra gelen elemanlara öncekinin toplamı ile pozisyon bildireceğim. özetlersem, bu divi tekrarlanan halde css kullanarak nasıl sıralarım?

.bildirim-mesaj{
    -ms-word-wrap:break-word;
    word-wrap:break-word
}
.bildirim-pozisyon{
    bottom:12px;
    right:12px
}
#bildirim{
    position:fixed;
    z-index:999999;
    pointer-events:none
}
#bildirim *{
    box-sizing:border-box
}
#bildirim>div{
    position:relative;
    pointer-events:auto;
    overflow:hidden;
    margin:0 0 6px;
    padding:15px 15px 15px 50px;
    width:300px;
    border-radius:3px;
    box-shadow:0 0 12px darkred;
}
.bildirim-bar{
    position:absolute;
    left:0;
    bottom:0;
    height:4px;
}
#bildirim>div{
    background:rgba(0, 0, 0, 0.5);
    padding:20px;
    color: red;
    font-family: terminal;
    box-shadow:0 0 1px red,0 2px 4px red;
}
.bildirim-kenar{
    background:#fff;
    border-left:6px solid red
}
.bildirim-kenar .bildirim-bar, .bildirim-bar, .bildirim-kenar{
    background-color: red;
}

<div id="bildirim" class="bildirim-pozisyon" aria-live="polite" role="alert">
  <div class="bildirim-kenar" style="display: block;">
    <div class="bildirim-bar" style="width: 66.1%;">
    </div>
    <div class="bildirim-mesaj">Hali hazırda kopyalanan içerik mevcut
    </div>
  </div>
</div>

        let yukseklik = 0,
            id        = Math.floor(Math.random() * 99999),
            genislik  = 100;
        $('.bildirim-pozisyon').each(function(){
            yukseklik += this.offsetHeight;
        });
        console.log(id);
        yukseklik > 0 ?
            $('#bildirim').before(app.str_replace(h.bildirim, [id])) :
        $('body').append(app.str_replace(h.bildirim, [id]));
        $(`[bildirim='${id}']`).css("bottom", yukseklik + 12);
        $(`[bildirim='${id}'] > .bildirim-kenar > .bildirim-mesaj`).text(mesaj);
        var bildirimBar = setInterval(function(){
            genislik -= 0.1;
            $(`[bildirim='${id}'] > .bildirim-kenar > .bildirim-bar`).width(genislik+'%');
            if(genislik < 0){
                clearInterval(bildirimBar);
                $(`[bildirim='${id}']`).fadeOut(1000);
                setTimeout(function(){
                    $(`[bildirim='${id}']`).remove();
                }, 1500);
            }
        }, 10);