Как сделать перекрытие предупреждений?

Я хочу отображать эти предупреждения поверх моей страницы. Однако всякий раз, когда я это делаю, он подталкивает содержимое ниже него. Я не хочу этого. Я хочу, чтобы он просто перекрывался (это означает, что оно отображается вверху, но содержимое вверху не отбрасывается).

Я могу отображать более одного из этих предупреждений в данный момент времени. Для тех, я думаю, мне понадобится, чтобы они складывались поверх каждого предупреждения (в противном случае пользователи не смогут их прочитать).

Как мне это сделать? Преимущество только CSS. Открытые для не-TB, решения jQuery, если это абсолютно необходимо.

Ответы

Ответ 1

Вы можете разместить предупреждения в контейнере с абсолютным расположением, выталкивая их из потока:

.alerts {
  position: absolute;
  top: 30px;
  left: 20px;
  right: 20px;
}

<div class="main">
  <h1>Heading</h1>
  <p>
    Some content here...
  </p>
</div>
<!-- the order of elements is insignificant (you can swap the main 
     container and the alerts container and have the same result) -->
<div class="alerts">
  <div class="alert">alerting...</div>
  <div class="alert">alerting once more...</div>
</div>

Это демонстрируется с помощью декларативных компонентов Bootstrap (с помощью CSS-перехватчиков), но также будет работать с API-интерфейсом Bootstrap (JavaScript-вызовами).

Здесь показана живая демонстрация на plunker.