How to make alerts overlap?


Tags: jquery,css,css3,twitter-bootstrap

Problem :

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.



Solution :

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.


    CSS Howto..

    Any ideas how to replicate this inline dropdown menu using css/jquery

    How to make header/body/footer 'popup' div with variable height body?

    How to get website to show better in iPhone and iPad? (width too little)

    How to open a bootstrap modal when checked a chec-box (when a tick is placed on a check box)

    How to center a container and make webpage fit on mobile?

    How to hide text using CSS?

    Hide one div when showing another with JavaScript

    How can I add CSS and JS in Symfony2?

    How to use CSS in Emails (specifically, to design hyperlink button)

    How to decrease CSS opacity

    How to hide or show correctly page element (with media query of pure css)?

    Twitter Bootstrap + Rails, how do you integrate and modify it?

    How to prioritize custom css over the default Angular-material css

    How can I move text to a new line if it breaks the width of a box?

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    HTML & CSS: How do I completely remove the scroll-bars on the side of
    ?

    How would I have a larger center bottom navbar button in jQuery Mobile default navbar?

    How can i setup my php code to change my CSS background picture daily [closed]

    How to change css for an element but keep defaults for it's children

    How do I change background color of li elements

    how to move scrollbar from left to right in css?

    How to move the scrollbar down

    How do I code CSS to “change” when I load/pull content using ajax?

    How to build dynamic css main/sub menu's (or do I need jquery)?

    How to make 1 table scrollable with fixed header without affecting other tables in Bootstrap

    How are less files compiled into css templates in PHP Thelia?

    SVG, how to evaluate the property of the svg object

    How about taking out Bootstrap style? [closed]

    How To Embed font-awesome CSS into DOM Scripting (javascript)?

    How to implement ::ms-clear in CSS?