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

Question

I am trying to add pop-up messages, that confirms various actions, by showing up moving a bit to top, and then disappear. I used CSS3 animations to achieve that:

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

And I used JavaScirpt to start these messages:

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

}`

But when JS adds a new div with message, a new line appears in document and other content moves. When it is removed again line disappears and other content moves.

So how could I make appear this animation on top off other content without it moving. I need that message somewhere in the middle of document. Or maybe there some kind off other way or plug-in to display temporary pop-ups.

Answer 1

position: absolute will help here.

Absolute positioning takes the element completely out of the flow of the document therefore not affecting other content when your message appears and disappears. In contrast, floated elements nonetheless are still part of the document flow, which results in the shifting of content that you see on appearance/disappearance.

See the example below:

 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); } } messageBox('Passing by!', 'ok');

 *, :before, :after { box-sizing: border-box; margin: 0; padding: 0; } .bg-top { background: red; width: 100%; height: 50px; } .bg-bottom { background: blue; width: 100%; height: 50px; } #dump-message { margin-top: 100px; } #message-boxOK { width: 200px; background-color: #80b95c; position: absolute; left: 50%; margin-left: -100px; padding: 10px; text-align: center; border-radius: 5px; -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; } }

 <div class='bg-top'></div> <div id='dump-message'></div> <div class='bg-bottom'></div>