Bootstrap-3: Alerts without displacing existing content

Question

Image #1: Bootstrap Alert with .in class:

Image #2: Bootstrap Alert without .in class (Hides content underneath):

I've been trying since the past three hours to get alerts working perfectly - without displacing other content. I have read a few blogposts and SO Q&A but not able to achieve the desired effect.

Attempts:

• Closing (Dismissable Alerts) -or- Fading out makes the display: none; which effectively displaces content.
• Not fading out but removing the .in class makes the element hidden but still overlapping other elements (See Image #2 and HTML below)
• I've tried using Z-Index to fix this issue but that didn't work.
• I will try to attempt a pop-over alert next, unless I can find a better solution via SO.

HTML:

<div class="alert alert-message alert-info fade"><p> Joined: StaticRoom </p></div>

JavaScript:

function status(type, msg) {
    var alertHTML = "<div class='alert alert-message alert-" + type + " fade'><p> " + msg + " </p></div>";

    $("#roomInfo").html(alertHTML);
    $(".alert-message").addClass("in");

    setTimeout(function () {
      $(".alert-message").removeClass("in");
    }, 3000);  
}

Image #3: Desired:

1. no overlap after alert has expired
2. should not displace existing content when expired:

Help!

Answer 1

This is caused by alert self height, padding and margin. The .fade class only change opacity value, no more :

Extract from bootstrap.css

.fade{
    opacity:0;
    -webkit-transition:opacity .15s linear;
    transition:opacity .15s linear
}
.fade.in{
    opacity:1
}

What you can do is to override the Bootstrap CSS with :

.fade {
    height: 0;
    padding: 0;
    margin: 0;
    -webkit-transition:height .15s linear;
    transition:height .15s linear;
}
.fade.in {
    height: auto;
    padding: 15px;
    margin-bottom: 20px;
}

**EDIT **
I didn't get you wanted an absolute positionned alert. So, you don't need any additional classes, just a simple :

.movie {
    position: relative;
    width: 430px;
    margin: 20px auto;
    padding: 5px;
    padding-bottom: 40px; /* give extra space for form */
}
.movie form {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 5px;
}
.movie .alert {
    position: absolute;
    bottom: 30px; left: 5px; right: 5px;
}