Question

假设我有一个未知页面，其中一些内容是相对的，有些是绝对的。它有一些脚本，也可以有很多样式。

是否有任何通用解决方案如何使“每个”页面内容向下移动50px （例如），以在页面顶部留出空白空间？

仅使用JS / CSS。你知道，有效性的优先级低于功能性。

Answer 1

添加包装div并在其上加margin / padding。

您必须向包装器absolute，relative或fixed）添加定位，除static之外的其他任何内容，以便其子项定位到它

在向body标记添加CSS时，浏览器的行为会有所不同，这就是为什么我不建议修改它。

Answer 2

我怀疑你想为你现在在网站顶部看到的“警报”（比如stackoverflow）这样做。我通常这样做的方法是添加一个div，标识为message，作为正文标记后面的第一个div。

如果你不能在html中执行此操作，那么只需使用JS在body标签打开时插入div#message作为DOM中的第一个div。这样，无论div占用多少空间，其他所有内容都会向下移动。

如果您有绝对定位的元素，那么应该让所有页面内容都是div包装器，其位置应设置为相对。这样，当包装器向下移动时，所有内容都将是。即使你不能修改html，我确定你的html中有这样的包装器，只需使用CSS来改变它的位置属性。

在jQuery中，您只需使用prepend添加div作为body的第一个子项。

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

在纯粹的javascript中（未经测试）：

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