如何使警报重叠？

Question

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

我想在页面顶部显示这些警报.但是,每当我这样做时,它都会将其下方的内容推送下来.我不希望这样.我希望它只是重叠(意思是,它出现在顶部,但顶部的内容不会被推下).

我可能会在给定时间显示多个这些警报.对于那些人,我想我需要他们堆叠在每个警报之上(否则,用户将无法阅读它们).

我该怎么做呢？CSS唯一解决方案首选.如果绝对需要,可以使用非TB,jQuery解决方案.

Answer 1

您可以将警报放在一个绝对定位的容器中,将它们从流中弹出:

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

这是使用Bootstrap声明性组件(使用CSS钩子)演示的,但也可以使用Bootstrap命令式API(通过JavaScript调用).

这是关于plunker的现场演示,说明了这一点.