Fixed Element to Push Down Page

[schart]

Now I know that fixed- & absolute-positioned elements are flowing above other, but is there any way to push down the page with an element positioned to fix, top 0px, left 0px & right 0px using Javascript or jQuery?

Here is the CSS:

#topDiv{

position:fixed;

top:0px;

left:0px;

right:0px;

height:30px;

background-color:#303030;

opacity:0.8;

color:#DEDEDE;

padding:10px;

font-size:20px;

box-shadow:0px 0px 10px #000;

}

Also, please note that the div itself is not on the top of the page.
AND, The reason I don’t just put it on the top of the page is that I have lots and lots of pages, and I really do not want to go edit all of them.

Thank’s :)

[Billy]

How about making an invisible element the size of the #topDiv

#topDivPush {

height: 30px;

width: 100%;

}

[Billy]

You only need it to push down at the top, seeing as when you’re scrolling, there’ll always be stuff above it that you can’t see, so 30px missing won’t change anything.
Otherwise, look at the WordPress top-bar code when logged-in.

[Billy]

That is pretty awesome!

[Author]

Posts