javascript - 创建一个 javascript 通知插件 : How to align absolutely positioned divs on top of each other

Question

我正在尝试开发一个通知插件。我有以下代码

javascript

function notification () {

    var wrapper = document.createElement('div'),
        docFrag = document.createDocumentFragment();

    wrapper.textContent = 'Default text';

    wrapper.classList.add('notif');

    docFrag.appendChild(wrapper);


    document.body.appendChild(docFrag);

    var a = window.getComputedStyle(wrapper).height;

  wrapper.classList.add('animated');


}

CSS

body {
    background: #e2e2e2;
}
.notif {
  position: absolute;
    padding: 20px;
    background: #fff;
    display: block;
    width: 160px;
    margin-bottom: 10px;
      opacity: 0;
    -webkit-transform: translate3d(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.animated {
      opacity: 1;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
}

当 notification () 被调用时，应该添加一个新的通知。如果已存在通知，则添加新通知时，现有通知应动画化并向下推，新通知应位于其顶部。并且通知应该是 absolutely 定位的。但是在我的代码中，div 相互堆叠并且不会从上到下流动。我怎样才能做到这一点。

这是使用代码: DEMO 请运行 notification() 查看问题。

这是我想要开发的: Required look

编辑

它必须是 absolutely 或 fixed positioned 因为通知不应该影响网页的其他内容。

Answer 1

1. 通知似乎一个接一个地堆叠，因为您将它们的位置指定为绝对位置。如果你把它们的display属性设置成block，而不把它们的position属性设置成absolute，你就不用担心这个了。如果您希望将这些通知的容器从相对于 DOM 其余部分的定位中解放出来，您仍然可以将这些通知的容器的位置属性设置为绝对。
2. appendChild() 方法在末尾将元素插入到容器元素中。尝试使用 docFrag.insertBefore(wrapper, docFrag.firstChild);。