如何在 CSS 中设计通知容器？

function notify(msg) {
  let element = document.createElement('div');
  element.classList.add('notification');
  element.innerHTML = msg;
  let timeout;
  element.onclick = () => element.remove();
  element.onmouseenter = () => clearTimeout(timeout);
  element.onmouseleave = () => createTimeout();
  createTimeout();
  let recentElement = container.firstElementChild;
  if(recentElement) recentElement.before(element);
  else container.appendChild(element);
  indicator.innerHTML='Last msg is '+msg;
  function createTimeout() {
    timeout = setTimeout(() => { 
      element.remove() 
    }, 10000);
  }
}

let notifyIndex = 0;

x1.onclick = () => {
  notify(++notifyIndex);
}
x10.onclick = () => {
  for (let i = 0; i < 10; i++)
    notify(++notifyIndex);
};
x30.onclick = () => {
  for (let i = 0; i < 30; i++)
    notify(++notifyIndex);
};

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.action-list button {
  width: 4rem;
  margin .5rem
}
#container {
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
  align-content: flex-end;
  align-items: flex-end;
  bottom: 0;
  right: 30px;
  max-height: 100vh;
}
.notification {
  transition: all 500ms ease-in-out;
  box-shadow: 0 0 1rem #0004;
  margin: 0 1rem 1rem 0;
  background: #f9f99f;
  color: #000;
  border: 1px solid #0008;
  padding: .2rem 1rem;
  cursor: default;
  user-select: none;
}

<div id="container"></div>

<div>
<div id="indicator">Last msg is 0</div>
<div class="action-list">
  <button id="x1">x1</button>
  <button id="x10">x10</button>
  <button id="x30">x30</button>
</div>
</div>