Javascript 如何添加动画消失文本，而不添加新行

我试图添加弹出消息，确认各种操作，通过显示移动到顶部一点，然后消失。我使用CSS3动画来实现这一点：

#message-boxOK {
width: 200px;
background-color: #80b95c;
position: relative;
float: middle;
padding: 10px 10px;
text-align: center;
border-radius: 5px;
margin: 0 auto;
-webkit-animation-name: rise; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-name: rise;
animation-duration: 2s;
}
/* Standard syntax */
@keyframes rise {
0%   {bottom:25px;}
100% {bottom:100px;}
}

我使用JavaScirpt来启动这些消息：

function messageBox(message,type) {
if(type=="ok"){
    document.getElementById("dump-message").innerHTML ="<div id='message-  boxOK'>"+message+"</div>";
    setTimeout("document.getElementById('message-boxOK').remove()",1900);
}
else {
    document.getElementById("dump-message").innerHTML ="<div id='message-box'>"+message+"</div>";
    setTimeout("document.getElementById('message-box').remove()",1900);
}

功能消息框（消息，类型）{
如果（类型=“确定”）{
document.getElementById（“转储消息”）.innerHTML=“+消息+”；
setTimeout（“document.getElementById（'message-boxOK'）.remove（）”，1900）；
}
否则{
document.getElementById（“转储消息”）.innerHTML=“+消息+”；
setTimeout（“document.getElementById（'message-box'）.remove（）”，1900）；
}

}`

但当JS添加一个带有消息的新div时，文档中会出现一行新行，其他内容也会移动。再次删除时，该行将消失，其他内容也将移动

---

那么，我怎样才能使这个动画在其他内容的顶部出现而不移动呢。我需要在文档中间的某个信息。或者可能有其他方式或插件来显示临时弹出窗口。

位置：绝对

在这里会有所帮助

绝对定位使元素完全脱离文档流，因此在消息出现和消失时不会影响其他内容。相反，浮动元素仍然是文档流的一部分，这会导致在出现/消失时看到的内容发生变化

请参见下面的示例：

功能消息框（消息，类型）{
如果（类型=“确定”）{
document.getElementById（“转储消息”）.innerHTML=“+消息+”；
setTimeout（“document.getElementById（'message-boxOK'）.remove（）”，1900）；
}否则{
document.getElementById（“转储消息”）.innerHTML=“+消息+”；
setTimeout（“document.getElementById（'message-box'）.remove（）”，1900）；
}
}
messageBox（'路过！'，'确定'）
*，：之前，：之后{
框大小：边框框；
保证金：0；
填充：0；
}
.bg顶部{
背景：红色；
宽度：100%；
高度：50px；
}
.bg底部{
背景：蓝色；
宽度：100%；
高度：50px；
}
#转储消息{
边缘顶部：100px；
}
#消息框OK{
宽度：200px；
背景色：#80b95c；
位置：绝对位置；
左：50%；
左边距：-100px；
填充：10px；
文本对齐：居中；
边界半径：5px；
-webkit动画名称：上升；
/*铬、狩猎、歌剧*/
-webkit动画持续时间：2秒；
/*铬、狩猎、歌剧*/
动画名称：上升；
动画持续时间：2秒；
}
/*标准语法*/
@关键帧上升{
0% {
底部：25px；
}
100% {
底部：100px；
}
}

尝试使用
position:absolute
，因为我猜您是布局的浮动元素。根据您对问题的良好解释，这不是100%必要的，但如果您提供了一个片段（可用示例），您可能会更快地得到质量更好的答案：）