絶対配置された要素の周囲にマージンやパディングを追加するにはどうすればよいですか？

Question

だから基本的に私はこのようなレイアウトを持っている：

<div id="header"> 
    <div id="elementAbsolute"> 
    <div id="headerElement1"> 
    <div id="headerElement2"> 
</div> 

<div id="content"> 
etc etc 

私の問題は、div要素のid「elementAbsolute」は、ランダムにページ上のオンまたはオフにすることができるということです。私はそれを支配していない。それが上にあるときはヘッダーの下に表示する必要がありますが、コンテンツの前に表示する必要があります。それは絶対的に配置されているので、コンテンツの上に表示されます。明らかに上下の空白を作成しません。

この特定のテンプレートでは、その要素はマークアップ内のどこで呼び出される必要があります。移動することはできません。 "elementAbsolute"がオンになっていて、 "header" divの中のページに存在し、ヘッダーとcontent divの間に移動して空白を作成する方法はありますか？

このテンプレートは複数のサイトで使用されるため、「header」内に「elementAbsolute」が存在する場合にのみ空白を追加できます。

jQuery after（）関数を使用して空白のdivを前後に配置して、そのスペースを作成することを考えていましたが、問題が発生するようになりましたが、「elementAbsolute」がオンの場合のみ実行しますページがなければ、何も関係なく空白があります。

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

Answer 1

elementAbsoluteは固定の高さである場合は、簡単な修正はheaderElement 1または2に空白を追加することです代わりに

#elementAbsolute + #headerElement1 + #headerElement2 
{ 
    margin-bottom: 50; /* Size of absolute element /* 
} 

Answer 2

if(jQuery("div#elementAbsolute")) { // execute your code }

はまた、あなたのdivに終了タグを持っていることを確認したいです。

Answer 3

CSS内の+（隣接兄弟）セレクタを使用して、兄弟要素をターゲットにすることができます。可能であれば、ブラウザでJavaScriptをオフにしてJavaScriptコードのCPUオーバーヘッドを減らすために、CSSを使用することをお勧めします。

#special-padding { 
    height : 0; 
} 
#header > #elementAbsolute + #special-padding { 
    height : 50px; 
} 

#elementAbsoluteと#special-padding要素が、右隣同士になるようにこれはあなたのHTMLのわずかな再書き込みを必要とします。ここでは

<div id="header"> 
    <div id="headerElement1"> 
    <div id="headerElement2"> 
    <div id="elementAbsolute"> 
    <div id="special-padding"> 
</div> 

はデモです：http://jsfiddle.net/TsPkc/1/

それとも、要素にmarginを追加できます。

#header > #elementAbsolute ~ #headerElement2 { 
    margin-bottom : 50px; 
} 

これは、#header要素の子である最後の要素（#headerelement2）にいくらかのマージンを追加します。