로딩 된 후 절대 위치 된 요소 주위에 여백 또는 패딩을 어떻게 추가합니까?

Question

그래서 기본적으로 나는이 같은 레이아웃을 가지고 :

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

<div id="content"> 
etc etc 

내 문제가 DIV ID가 "elementAbsolute는"무작위 페이지에서 켜거나 끌 수 있다는 것입니다. 나는 그것을 통제 할 권한이 없다. 위에 있으면 머리글 아래에 있지만 내용 앞에 나타나야합니다. 그것이 절대적으로 배치 되었기 때문에 그것은 내용 위에 나타납니다. 분명히 위 또는 아래에 수직 공백을 만들지 않습니다.

이 템플릿에서 해당 요소는 마크 업에있는 곳에서 호출해야합니다. 그것은 움직일 수 없다. javascript를 통해 "elementAbsolute"가 켜져 있고 "header"div 내부의 페이지에 존재하는 경우 header와 content div 사이를 이동하여 공백을 만들 수있는 방법이 있을까요?

또한이 템플릿은 여러 사이트에 사용되므로 "header"내에 "elementAbsolute"가있는 경우에만 공백을 추가 할 수 있습니다.

jQuery after() 함수를 사용하여 줄을 따라 앞뒤로 비어있는 div를 넣을 생각 이었지만 "elementAbsolute"가 설정된 경우에만이 함수를 실행하면됩니다. 페이지, 그렇지 않으면 무엇이든간에 공백이 생길 것입니다.

도움 주셔서 감사합니다.

Answer 1

는 간단한 수정 대신

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

Answer 2

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

또한, 당신은 당신의 div의에 닫는 태그가해야 할.

Answer 3

CSS의 + (인접 형제) 셀렉터를 사용하여 형제 요소를 타겟팅 할 수 있습니다. 가능한 경우 CSS를 사용하는 것이 좋습니다. 브라우저에서 JavaScript가 꺼져 있고 JavaScript 코드의 CPU 오버 헤드를 줄이는 데 도움이됩니다. http://jsfiddle.net/TsPkc/1/

또는 : 여기

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

는 데모 경우 : #elementAbsolute 및 #special-padding 요소가 바로 옆에 있도록 이것은 당신의 HTML의 약간의 다시 쓰기를 필요로

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

요소에 margin을 추가 할 수 있습니다.

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

이것은 #header 요소의 하위 요소 인 마지막 요소 (#headerelement2)에 약간의 여백을 추가합니다. elementAbsolute는 높이가 고정 인 경우