如何下推頁面並在頂部附加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  */
}