css - 引导警报重叠

Question

我已经修改了引导警报，因此它们显示在内容的顶部而不向下移动任何其他 div，但我遇到的问题是应用程序可以同时显示警告、错误或成功消息，但它们相互重叠。

这是我的警报的CSS：

.alert {
  position: absolute;
  z-index: 999999;
  width: 800px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

编辑：这是jsfiddle 中的示例

编辑 2：感谢 Praveen，这是适合我的应用程序的代码：jsfiddle 上的最终代码

Answer 1

由于职位是absolute，您正面临这个问题。以这种方式制作它们relative：

.alert {
  position: relative;

小提琴：http: //jsfiddle.net/praveenscience/Q6nA9/2/