创建一个JavaScript通知插件：如何将绝对定位的div彼此对齐

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()来查看问题。

这是我要开发的： 必需的外观

编辑

它必须是绝对位置或固定位置，因为通知不应影响网页的其他内容。

Answer 1

由于绝对位置的元素会停留在指定位置，因此无法使用。 相反，您可以做的是绝对定位容器并在其中附加div。 Divs作为块元素自然会使其自身下降。

希望这可以帮助

Answer 2

1. 通知似乎彼此叠加，因为您将其位置分配为绝对位置。 如果将其显示属性设置为“阻止”，而未将其位置属性设置为“绝对”，则无需担心。 如果希望从相对于DOM其余部分的位置中释放它们，仍可以将这些通知的容器的position属性设置为absolute。
2. appendChild（）方法最后将元素插入容器元素内。 尝试使用docFrag.insertBefore(wrapper, docFrag.firstChild); 。

Answer 3

之所以将它们堆叠在彼此的顶部，是因为它们的位置绝对正确。 您可以在此处使用该方法解决问题。

文章摘要：

绝对定位元素时，其边界框默认为body 。
但是，当您将绝对定位的元素添加到相对定位的元素时，绝对定位元素的边界框将变为相对定位的元素空间。

HTML看起来像：

<relative-element>
    <absolute-element>
        <!-- Content -->
    </absolute-element>
</relative-element>

使用CSS看起来像：

relative-element {
    position: relative;
}

absolute-element {
    position: absolute;
}

将文章应用于您的问题

创建一个容器并将其相对放置。
向其添加另一个容器，并将其完全放置。 （这将保存您的通知）
将子级添加到最后一个容器中，它们将像您希望的那样堆叠。

Answer 4

您可以通过疯狂的方式进行操作：

• 为通知块添加一个包装器（notif-wrapper）；
• 每个新块（也用notif-wrapper包装）在所有块之前插入最深的通知包装$newNotifWrapper.insertBefore(jQuery('.nofit-wrapper .notif').last())并添加css .notif .notif {top: 0; left: 0;} .notif .notif {top: 0; left: 0;}
• 显示后，每个新的notif-wrapper都应为其高度设置动画

但是显然，更简单，更好的方法是为所有通知创建一个包装，在第一个通知到来时将其添加一次，然后将所有这些新通知插入该包装的第一个孩子之前，以动画化其高度。