全身上下推倒身体和背景答案

【问题标题】：Pushing down the body and background universally全身上下推倒身体和背景
【发布时间】：2011-12-24 11:36:34
【问题描述】：

因此，已经有一些关于此的问题，但我的问题更具体一些。

当用户以管理员身份登录时，我想在我的 CMS 的所有页面顶部添加一个 40 像素高的管理栏。

但我不想遮挡页面上的内容，所以我想把它往下推。请记住，这是一个 CMS，因此在所有使用它的页面上都有很多不同的 CSS/设计。系统确实可以控制所有 CSS，所以我可以随时更改它。

我首先在 body 元素中添加了一个“margin-top: 40px”，然后才意识到 BODY 的 background-image 实际上并没有附加到 body 上，而是附加到了其他无法设置样式的根元素上。

所以，我使用“background-position: 0 40px”来向下移动背景图像。分数！只是，一些网站已经使用 background-position 来定位与内容相关的背景，而我的重写严重破坏了这些页面的设计。

那么 - 有没有更好的方法来处理这个问题？或者我是否必须即时解析和更改每个站点可能的背景位置 - 我可以这样做，但不是:)

感谢您的帮助！

【问题讨论】：

【解决方案1】：

如果对html元素应用了背景，你可以下推html元素，然后使用position:absolute来定位你的header。示例：http://jsfiddle.net/u22zE/2/

【讨论】：

可以，但这不会下推 BODY 标签的背景图片。
@Sandman 这应该下推即使背景图像应用在body标签中，因为body标签在html标签中。请参阅帖子中的示例，我修复了 Firefox 中的一个错误
不幸的是，它没有。使用 DOM 检查器隐藏标题标签，您将在其下方看到背景图像。背景图像实际上并没有附加到 body DOM 对象，而是附加到根对象，因此不会受到设置到 body 标签的任何边距的影响。
@Sandman 我看到了，背景图像仍然在标题后面，但背景图像已经移动了。如果您将 repeat-x 添加到 html 背景，您将看到背景移动。看这个：jsfiddle.net/u22zE/4

【解决方案2】：

您可以尝试以下方法，但您可能需要将您的 cms 工具栏置于负位置。

html { margin-top: 40px; }
#yourCmsBar { position: absolute; top: -40px; height: 40px; }

【讨论】：

【解决方案3】：

为避免此问题，您可以更改 CMS 的运行方式。添加一个整页包装器div，它充当用户内容的主体。然后，在 wrapper 上方插入一个 40px 高的元素会将其普遍向下推。

【讨论】：