css - Bootstrap 警报重叠

Question

我已经修改了 Bootstrap 警报，因此它们显示在内容的顶部而不向下移动任何其他 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，您正面临这个问题。以这种方式使它们相对:

.alert {
  position: relative;

fiddle :http://jsfiddle.net/praveenscience/Q6nA9/2/