加载后，如何在绝对定位的元素周围附加边距或填充？

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内的页面上，那么在标题和内容div之间移动它并创建一些空格？

另请注意，此模板用于多个站点，因此只有在“header”中存在“elementAbsolute”时才能添加空格。

我正在考虑使用jQuery after（）函数在它之前和之后放置一个空div来创建该空间，但后来我的问题变成了我只希望这个函数运行如果“elementAbsolute”在页面，否则我会在那里有空白。

感谢您的帮助！

Answer 1

您可以使用CSS中的+（相邻兄弟）选择器来定位兄弟元素。在可能的情况下，最好使用CSS，以防浏览器关闭JavaScript并帮助减少JavaScript代码的CPU开销。

#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上有结束标记。