语义UI吐司通知重叠问题

Question

我写了下面的标记来创建吐司通知，并且每当有通知时我都会显示div。

我面临的问题是吐司通知彼此重叠，但我希望它们是一个在另一个之下，以便如果第一个通知出现它应该在顶部，同时如果第二个通知出现它应该是在第一次通知之后或之下。

<div class="ui positive green message hidden">
  <i class="close icon"></i>
  <div class="header"></div>
  <p></p>
</div>

我希望它看起来像这样：

--------------------------------
** The first notification **
--------------------------------

---------------------------------
** The second notification **
--------------------------------

它们不应该相互重叠。

Answer 1

好。所以，你正在做的是给每个通知一个绝对的位置。这会导致每个通知堆叠在另一个上面。一个可能的简单解决方案是从这个div，position: absolute;中删除<div class="ui positive green message hidden">并为所有通知创建一个容器。最后，给容器div（notification-container）一个绝对的位置。

.notification-container {
  position: absolute;
}

<div class=notification-container>

  <div class="ui positive green message hidden">
    <i class="close icon">icon</i>
    <div class="header">header</div>
    <p>The first notification</p>
  </div>
  
  <div class="ui positive green message hidden">
    <i class="close icon">icon</i>
    <div class="header">header</div>
    <p>The second notification</p>
  </div>

</div>