javascript - 语义 UI toast 通知重叠问题

Question

我编写了以下标记来创建 toast 通知，并在有通知时显示 div。

我面临的问题是 toast 通知相互重叠，但我希望它们彼此重叠，这样如果第一个通知出现，它应该在顶部，同时如果第二个通知出现它应该在第一个通知之后或之下。

<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

好的。所以，你正在做的是给每个通知一个绝对的位置。这会导致每个通知堆叠一个在另一个之上。一种可能的简单解决方案是删除 position: absolute;从这个 div，<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>