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

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 的高度是固定的，那么一个简单的解决方法是将空白添加到 headerElement 1 或 2 中

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

Answer 2

您可以在 CSS 中使用 +（相邻兄弟）选择器来定位兄弟元素。如果可能，最好在浏览器关闭 JavaScript 的情况下使用 CSS，并帮助减少 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;
}

这将为作为 #header 元素的子元素的最后一个元素 (#headerelement2) 添加一些边距。

Answer 3

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

另外，你要确保你的 div 上有结束标签。