title: Bootstrap alerts overlapping
body: <p>I have modified the bootstrap alerts so they show on the top of the content without moving down any other div, but the issue i have is that the application can show at the same time warnings, errors or success messages but they are overlapping each other.</p>
  
  <p>Here is my alert's css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>Edit:</strong> Here is the <a href="http://jsfiddle.net/Q6nA9/" rel="nofollow">Example in jsfiddle</a></p>
  
  <p><strong>Edit 2:</strong> Thanks to Praveen, here is the code that suits my app: <a href="http://jsfiddle.net/jnar/Q6nA9/5/" rel="nofollow">Final code on jsfiddle</a></p>