How to make alerts overlap?

Question

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

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.

Answer 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">
  <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>

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

Here's a live demo on plunker illustrating this.