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

我已经写了下面的标记来创建吐司通知，只要有通知，我就会显示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 **
--------------------------------

它们不应相互重叠。

最佳答案

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

.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>

关于javascript - 语义UI toast 通知重叠问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55476907/