title: Semantic UI toast notification overlapping issue
body: <p>I have written the below markup to create toast notifications and I show the div whenever there is a notification.</p>
  
  <p>The issue I am facing is the toast notifications are overlapping on each other but I want them to be one under another so that if the first notification appears it should be on the top, and at the same time if the second notification appears it should be after or below the first notification.</p>
  
  <pre><code>&lt;div class="ui positive green message hidden"&gt;
    &lt;i class="close icon"&gt;&lt;/i&gt;
    &lt;div class="header"&gt;&lt;/div&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want it to look like this:</p>
  
  <pre><code>--------------------------------
  ** The first notification **
  --------------------------------
  
  ---------------------------------
  ** The second notification **
  --------------------------------
  </code></pre>
  
  <p>They should never overlap on each other.</p>