How to move all content (relative, absolute, ...) down?

Question

Let's say I have an unknown page with some content posted relatively, some absolute. It has several scripts, and there can be many styles.

Is there any universal solution how to make “every” page content moved by 50px (for example) to make an empty space on top of the page?

Use only JS / CSS. You know, reality takes precedence over functionality.

Answer 1

Add a wrapper div and put margin / padding on it.

You will need to add positioning to the wrapper ( absolute , relative or fixed ), nothing but static , so that his children put it.

JSFiddle example

---

Browsers behave differently by adding CSS to the body tag, so I do not recommend modifying it.

Answer 2

I suspect you want to do this for the “warnings” that you see at the top of the websites (like stackoverflow). I usually do this by adding a div with id message as the first div after the body tag.

If you cannot do this in html, just use JS to insert the div#message as the first div in the DOM when the body tag opens. That way, in any space that the div occupies, everything else will be moved down.

If you have absolute positioned elements, you should have all the contents of your pages - this is a wrapper div, which should have a position corresponding to the relative. That way, when the shell moves down, that is the whole content. Even if you cannot change the html, I'm sure that your html has such a wrapper, just use CSS to change its position property.

In jQuery, you can simply use prepend to add a div as the first child of the body .

 $('body').prepend("<div id='message'></div>"); 

In pure javascript, something like (untested):

 var myDiv = document.createElement('div'); myDiv.setAttribute("id","message"); insertBefore(myDiv,document.body.firstChild);