Làm cách nào để đặt cảnh báo trùng lặp?

Question

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

Tôi muốn hiển thị các cảnh báo này ở đầu trang của mình. Tuy nhiên, bất cứ khi nào tôi làm, nó đẩy nội dung bên dưới nó xuống. Tôi không muốn điều đó. Tôi muốn nó chỉ chồng lên nhau (có nghĩa là nó xuất hiện ở phía trên, nhưng nội dung ở phía trên không bị đẩy xuống).

Tôi có thể hiển thị nhiều hơn một trong các cảnh báo này tại một thời điểm nhất định. Đối với những người, tôi nghĩ rằng tôi sẽ cần chúng để ngăn xếp trên đầu trang của mỗi cảnh báo (nếu không, người dùng sẽ không thể đọc chúng).

Làm cách nào để thực hiện việc này? Chỉ ưu tiên giải pháp CSS. Mở ra các giải pháp không phải là TB, jQuery nếu cần thiết.

Answer 1

Bạn có thể đặt các cảnh báo trong một container vị trí tuyệt đối, poping họ ra khỏi dòng chảy:

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

này được chứng minh bằng các thành phần khai báo Bootstrap (với móc CSS), nhưng cũng sẽ làm việc sử dụng API bắt buộc Bootstrap (bằng các cuộc gọi JavaScript).

Dưới đây là một số live demo on plunker minh họa điều này.