Css JavaScript在消息中稍微向下移动（div）？

有没有一种方法可以将一个div中的文本向下移动一些像素？（可能使用jQuery或w/e）

我会得到的效果就像stackoverflow在顶部显示黄色消息（用于徽章），但我需要它在页面中，而不向下移动页面的所有其余部分

例如：

（当信息向下移动时，我也会添加淡入淡出效果）

---

P.请考虑该消息可以大于1（就像Sttop Excel在顶部）

jQuery，这将是这样的：

<div id="message">Some message</div>
$("#message").slideDown(500); //where 500 is the time effect in miliseconds..

在线演示：

更新：如果您想避免在设置动画时移动其他内容，可以在css中使用

position:absolute

，请参见下面的演示：

---

演示避免下推：

您可以将div设置为

位置：绝对

，然后使用

jQuery向下设置动画。动画

更改

顶部

样式

在此处阅读jQuery.animate：

您可以在这里看到一个简单的示例：

---

注意：与使用

slideDown

相反，这种方法实际上会将整个div从其隐藏位置向下滑动，其中as

slideDown

只会显示静态定位的内容，imo看起来非常完整

假设您的页面没有放置在某个位置为绝对的容器中， 添加一个容器元素作为正文的第一个子元素将向下推呈现页面的所有其余部分。 （容器-任何包含HTML的HTML标记，通常为DIV）

这是一个使用纯javascript的示例：

将“添加”连接到消息传递事件，或在服务器上呈现 将“移除”连接到消息栏的关闭按钮 就这些：）

---

这个解决方案的问题是它会向下推送下面的内容，而演示不会显示这些内容，因为没有内容。如果你注意到stackoverflow消息确实推动了页面，这就是OP要求不要发生的事情，但是如果你想避免这种情况，将position:absolute添加到csssee中的元素在此处查看position:absolute：注意，我使用边距推送内容，否则消息将overlap@martin：我不能将固定高度的容器设置为“cointain”吗ExpReScript让页面的其余部分向下移动？@阿莫斯里维拉：我认为我不能使用位置：绝对，因为消息应该出现在正文的中间，谢谢这个例子！但是我不想让消息在底部的文本上移动。在这种情况下，你要么需要为滑动div留出空间，要么需要让它向下推文本，你不能让bothi为滑动留出空间，这不是问题。我用更强大的功能更新了jsfiddle示例。玩得开心：）

$("#message").animate({height:"30px", opacity:1 },500);

function $e(s){ return document.getElementById(s) }

function add(){
    var d = document.createElement("div");
    d.innerHTML = "your message: " + $e("txt").value;
    document.body.insertBefore(d, document.body.firstChild);
}

function remove(){
    // assuming that your page content is wrapped in a div with ID="content"
    if (document.body.firstChild.id == "content") return;

    document.body.removeChild( document.body.firstChild);
}