Jak powodować nakładanie się alertów?

Question

RE: http://twitter.github.io/bootstrap/components.html#alerts

Chcę wyświetlić te powiadomienia na górze mojej strony. Jednak zawsze, gdy to zrobię, przesuwa zawartość poniżej. Nie chcę tego. Chcę, żeby się nakładało (co oznacza, że ​​pojawia się na górze, ale zawartość na górze nie jest zmniejszana).

Mogę wyświetlać więcej niż jeden z tych alertów w określonym czasie. Myślę, że potrzebowałbym ich, aby ułożyli się na szczycie każdego alertu (w przeciwnym razie użytkownicy nie będą w stanie ich odczytać).

Jak to zrobić? Preferowane rozwiązanie tylko CSS. Otwarte na nie TB, rozwiązania jQuery, jeśli są absolutnie potrzebne.

Answer 1

można umieścić ostrzeżenia w absolutnej umieszczony pojemnika poping ich przepływu:

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

to wykazać za pomocą Bootstrap komponenty deklaratywnych (z hakami CSS), ale również pracować z użyciem wymagający API Bootstrap (przez wywołania JavaScript).

Oto ilustracja ilustrująca to: live demo on plunker.