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

Question

What is the best way to push page down 30px , and put a div tag height 30px at top, like a toolbar?

I tried code as below, but it could not push down page that content div with position:absolute; and top:0; , or div with 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

If the content div has position:absolute; it's layout will not be affected by other elements.

You would need to add top: 30px to the content div.

Answer 2

Use the css below for your content div:

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

Answer 3

As the commenter to your post suggested, this seems to be the best option.

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