Bootstrap警报重叠

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;
}

修改：这是Example in jsfiddle

编辑2：感谢Praveen，以下代码适合我的应用：Final code on jsfiddle

Answer 1

由于该位置 absolute ，您将遇到此问题。以这种方式让他们 relative ：

.alert {
  position: relative;

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