Wie mache ich eine dedizierte Zeile für JavaScript-Warnungen?

Question

Im folgenden Beispiel wird bei jedem Alert der darunterliegende Inhalt um eine Zeile verschoben. Wie erstelle ich eine leere Zeile für Alerts, bei denen die Alerts nur ein- und ausgeblendet werden, ohne den Inhalt darunter zu verschieben?

jsfiddle

html:

<div class="alert-box success">Successful Alert !!!</div> 
<div class="alert-box failure">Failure Alert !!!</div> 
<div class="alert-box warning">Warning Alert !!!</div> 
<hr> 
<p>hello world</p> 
<p> 
    <button id="success-btn">Success</button> 
    <button id="failure-btn">Failure</button> 
    <button id="warning-btn">Warning</button> 
</p> 

javascript:

$("#success-btn").click(function() { 
    $("div.success").fadeIn(300).delay(1500).fadeOut(400); 
}); 

$("#failure-btn").click(function() { 
    $("div.failure").fadeIn(300).delay(1500).fadeOut(400); 
}); 

$("#warning-btn").click(function() { 
    $("div.warning").fadeIn(300).delay(1500).fadeOut(400); 
}); 

css:

.alert-box { 
    padding: 15px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
    border-radius: 4px; 
} 

.success { 
    color: #3c763d; 
    background-color: #dff0d8; 
    border-color: #d6e9c6; 
    display: none; 
} 

.failure { 
    color: #a94442; 
    background-color: #f2dede; 
    border-color: #ebccd1; 
    display: none; 
} 

.warning { 
    color: #8a6d3b; 
    background-color: #fcf8e3; 
    border-color: #faebcc; 
    display: none; 
} 

Answer 1

Wickeln Sie sie in ein Wrapperdiv mit einer ausreichenden Höhe.

Fiddle

<div id="alert-wrapper"> 
    <div class="alert-box success">Successful Alert !!!</div> 
    <div class="alert-box failure">Failure Alert !!!</div> 
    <div class="alert-box warning">Warning Alert !!!</div> 
</div> 

CSS:

#alert-wrapper{ 
    height:46px; 
} 

Answer 2

USe visibility: hidden 

.alert-box { 
    padding: 15px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
    border-radius: 4px; 
} 

.success { 
    color: #3c763d; 
    background-color: #dff0d8; 
    border-color: #d6e9c6; 
    visibility: hidden; 
} 

.failure { 
    color: #a94442; 
    background-color: #f2dede; 
    border-color: #ebccd1; 
    visibility: hidden; 
} 

.warning { 
    color: #8a6d3b; 
    background-color: #fcf8e3; 
    border-color: #faebcc; 
    visibility: hidden; 
}