如何下推页面并在顶部附加div？

Question

什么是将页面下推30px并将div标签高度设置为30px的最佳方法，例如工具栏？

我尝试了如下代码，但是它无法将具有position:absolute;内容div的页面下推 和top:0; ，或带有position:fixed; div position:fixed; ， z-index:9999; top:0;

var divToolbar = document.createElement("div");
divToolbar.id = "divToolbar";
divToolbar.style.width = 100 + "%";
divToolbar.style.height = 30 + "px";
document.body.insertBefore(divToolbar,document.body.firstChild);

Answer 1

如果内容div具有position:absolute; 它的布局不会受到其他元素的影响。

您需要在内容div中添加top: 30px 。

Answer 2

将以下CSS用于您的内容div：

.content {
    position:absolute;
    top:30px;
}

Answer 3

正如您的帖子的评论者所建议的那样，这似乎是最好的选择。

.header{
    position:fixed;
    height:30px;
}
.content{
    margin-top:35px;/* or adjust it the way you want  */
}