javascript - 如何为 javascript 警报创建专用行？

Question

在下面的 jsfiddle 示例中，每次出现警报时，它都会将其下方的内容向下移动一行。如何创建一个专用于提醒的空白行，让提醒淡入淡出而不向下移动其下方的内容？

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:

#alert-wrapper{
    height:46px;
}