身体と背景を普遍的に押し下げる

これについては既に質問がありますが、私のところはもう少し具体的です。身体と背景を普遍的に押し下げる

ユーザーが管理者としてログインしているときに、私のCMSの全ページの上部に40pxの高さの管理バーを追加したいとします。

しかし、私はページ上のコンテンツをあいまいにしたくないので、私はそれを押し下げたいと思います。これはCMSなので、それを使用するすべてのページにさまざまなCSS /デザインがたくさんあることを覚えておいてください。システムはすべてのCSSのコントロールを持っているので、私はその場で変更することができます。

BODYの背景イメージがボディに実際には接続されていないことを認識する前にbody要素に "margin-top：40px"を追加することから始めましたが、そうでなければunstylableルート要素です。

「background-position：0 40px」を使用して背景画像を下に移動しました。スコア！一部のサイトでは、既にバックグラウンドポジションを使用してコンテンツとの関連で背景を配置しています。そのサイトをオーバーライドすると、そのページのデザインが大きく乱れてしまいます。

これを処理するには、より良い方法がありますか？または私は解析して、その場で可能なすべてのサイトのバックグラウンドポジションを変えなければならないでしょうか？はです。

ありがとうございました！

出典

2011-11-08 Sandman

この問題を回避するには、CMSの機能を変更することができます。ユーザーのコンテンツの本体として機能する全面ラッパーdivを追加します。次に、40pxの高さの要素をラッパーの上に挿入すると、全体的にプルダウンされます。

出典

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タグがhtmlタグに入っているので、bodyタグで背景画像さえも押し下げるべきです。投稿の私の例を参照してください、私はFirefoxのバグを修正しました –

残念ながら、それはしませんでした。 DOMインスペクタを使用してヘッダータグを非表示にすると、その下に背景イメージが表示されます。背景イメージは実際には本体のDOMオブジェクトには付加されず、ルートオブジェクトに付加され、bodyタグに設定された余白の影響を受けません。 – Sandman

身体と背景を普遍的に押し下げる

答えて

関連する問題