jquery - 如何使警报重叠？

Question

回复: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 Hook )进行演示的，但也可以使用 Bootstrap 命令式 API(通过 JavaScript 调用)。

这是一个 live demo on plunker说明这一点。