Проблема перекрытия уведомления о тосте в семантическом интерфейсе - PullRequest
Новая
       27

Проблема перекрытия уведомления о тосте в семантическом интерфейсе

0 голосов
/ 02 апреля 2019

Я написал приведенную ниже разметку для создания всплывающих уведомлений и показываю 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 **
--------------------------------

Они никогда не должны накладываться друг на друга.

1 Ответ

0 голосов
/ 03 апреля 2019

Хорошо.Итак, то, что вы делаете, дает каждому уведомлению абсолютную позицию.Это заставляет каждое уведомление накладывать один поверх другого.Одним из возможных простых решений является удаление 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>
...