Come si sovrappongono gli avvisi?

Question

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

Desidero visualizzare questi avvisi nella parte superiore della mia pagina. Tuttavia, ogni volta che faccio, spinge il contenuto sotto di esso. Non lo voglio Voglio che si sovrapponga (significa che appare in alto, ma il contenuto nella parte superiore non viene premuto).

È possibile che venga visualizzato più di uno di questi avvisi in un dato momento. Per quelli, penso che avrei bisogno che fossero impilati in cima ad ogni avviso (altrimenti, gli utenti non saranno in grado di leggerli).

Come posso fare? Soluzione solo CSS preferita. Aprire a non-TB, soluzioni jQuery se assolutamente necessario.

Answer 1

è possibile inserire gli allarmi in un contenitore posizionato assoluto, li poping fuori dal flusso:

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

Questo è dimostrato utilizzando componenti dichiarative Bootstrap (con ganci CSS), ma sarebbe anche lavorare utilizzando l'API imperativa Bootstrap (da chiamate JavaScript).

Ecco un live demo on plunker che illustra questo.