普遍推動身體和背景

所以，已經有一些關於這個問題，但我的一些更具體。普遍推動身體和背景

當用戶以管理員身份登錄時，我想將一個40像素高的管理欄添加到我的CMS所有頁面的頂部。

但我不想模糊頁面上的內容，所以我想把它壓下來。請記住，這是一個CMS，所以在使用它的所有頁面上都有很多不同的CSS /設計。儘管系統確實擁有所有CSS的控制權，所以我可以隨時更改它。

我開始在body元素上添加一個「margin-top：40px」，然後才意識到BODY的背景圖實際上並沒有附加到body上，而是其他不可見的根元素。

所以，我使用「背景位置：0 40px」向下移動背景圖像。得分了！只有一些網站已經使用背景位置來定位與內容相關的背景，而我忽略了這些嚴重混淆了這些網頁的設計。

那麼 - 有沒有更好的方法來處理這個問題？或者我將不得不解析和更改每個站點可能的後臺位置 - 我可以可以做，而不是:)

感謝您的幫助！

2011-11-08 Sandman

要避免此問題，您可以更改CMS功能的方式。添加完整頁面包裝div，充當用戶內容的主體。然後，在包裝上方插入一個40像素高的元素將普遍推下。

2011-11-08 14:30:17

問題不在於推送內容，這很容易。但我需要*背景圖像*也被推下來，這是我的問題所在。 – Sandman

如果將背景圖像應用於該div封裝（而不是實際主體），則會一直向下推送。 –

我很確定說DIV在所有情況下都可以和視口一樣高......雖然這可能是新佈局問題的潛在來源... – Sandman

您可以嘗試以下操作，但可能需要定位您的cms工具欄。

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

2012-01-03 20:01:35 kontur

如果背景被應用到html元素能夠下推html元素，然後用position:absolute來定位你的頭。例如：http://jsfiddle.net/u22zE/2/

2012-01-03 20:04:02

是的，但不會下推BODY標籤的背景圖像。 – Sandman

@Sandman即使將背景圖像應用到body標籤中，也應該將其推下，因爲body標籤已放入html標籤中。在帖子中查看我的示例，我修復了Firefox中的一個錯誤 –

不幸的是，它沒有。使用DOM檢查器來隱藏標題標記，您將看到它下面的背景圖像。背景圖像實際上並不附加到主體DOM對象，而是附加到根對象，因此不會受到設置到body標籤的任何邊距的影響。 – Sandman

回答