javascriptアラート専用の行を作成するにはどうすればよいですか？

Question

下記のjsfiddleの例では、警告があるたびにその下のコンテンツを1行下にシフトします。アラートに専用の空白の行を作成すると、その下のコンテンツをシフトさせずにアラートがフェードインまたはフェードアウトされます。

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

これを十分な高さでラッパーdivにラップします。

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：あなたは[** THIS **]（http://jsfiddle.net/XDaEk/322/）のようなものを

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