How to make alerts overlap?

How to make alerts overlap?

I want to display these alerts on top of my page. However, whenever I do, it pushes the content below it down. I don’t want that. I want it to just overlap (meaning, it appears at the top, but the content at the top doesn’t get pushed down).
I may be displaying more than one of these alerts at a given time. For those, I think I would need them to stack on top of each alert (otherwise, users won’t be able to read them).
How do I do this? CSS only solution preferred. Open to non-TB, jQuery solutions if absolutely needed.


Solution 1:

You can place the alerts in an absolute positioned container, poping them out of the flow:

.alerts {
  position: absolute;
  top: 30px;
  left: 20px;
  right: 20px;
<div class="main">
    Some content here...
<!-- 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>

This is demonstrated using Bootstrap declarative components (with CSS hooks), but would also work using the Bootstrap imperative API (by JavaScript calls).

Related:  Get the current value in bootstrap-select

Here’s a live demo on plunker illustrating this.