Как добавить поле или отступ вокруг абсолютно позиционированного элемента после его загрузки?

Question

Так что в принципе у меня есть такой макет:

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

<div id="content">
etc etc

Моя проблема в том, что div id "elementAbsolute" может быть случайно включен или выключен на странице. Я не могу это контролировать. Когда он включен, он должен отображаться под заголовком, но перед содержимым. Поскольку он абсолютно позиционирован, он просто отображается над контентом. Он не создает никаких вертикальных пробелов над или под собой, очевидно.

В этом конкретном шаблоне этот элемент должен вызываться там, где он находится в разметке. Это не может быть перемещено. Есть ли способ, возможно, через javascript, сказать, что если «elementAbsolute» включен и существует на странице внутри div «header», то переместить его между заголовком и содержимым div и создать какой-нибудь пробел?

Также имейте в виду, что этот шаблон используется для нескольких сайтов, поэтому пробельные символы могут быть добавлены только в том случае, если "elementAbsolute" существует в "заголовке".

Я думал о том, чтобы использовать функцию jQuery after () для установки пустых элементов div до и после нее, чтобы создать это пространство, но моя проблема заключается в том, что я хочу, чтобы эта функция выполнялась, только если elementAbsolute находится на страница, в противном случае у меня будет пробел, несмотря ни на что.

Спасибо за любую помощь!

Answer 1

Вы можете использовать селектор + (смежный брат) в CSS для таргетинга элементов брата. Когда это возможно, рекомендуется использовать CSS в том случае, если в браузере отключен JavaScript, и это помогает снизить нагрузку на процессор JavaScript-кода.

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

Для этого требуется небольшая перезапись HTML-кода, чтобы элементы #elementAbsolute и #special-padding находились рядом друг с другом:

<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;
}

Это добавит некоторое поле к последнему элементу (#headerelement2), который является дочерним для элемента #header.

Answer 2

Если elementAbsolute имеет фиксированную высоту, тогда простым решением было бы добавить пробел к headerElement 1 или 2 вместо

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

Answer 3

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

Кроме того, вы должны быть уверены, что у вас есть закрывающие теги на ваших div.