如何在绝对定位的元素加载后添加外边距或内边距？

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”，那么我只想让这个函数运行，否则我将有空格存在。

感谢任何帮助！

- user1074378

---

为什么不在打开时将其设置为块而不是绝对定位？ - Diodeus - James MacFarlane

一个演示或者 jsfiddle 会很有帮助。 - Abhranil Das

“turned on or off”是什么意思？它是一个显示属性还是基于条件渲染的？ - Coronus

Answer 1

如果elementAbsolute具有固定的高度，则简单的解决方法是将空格添加到headerElement 1或2中。

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

- Paul Alexander

---

相邻兄弟选择器的运用很好。 - Jasper

Answer 2

你可以使用 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;
}

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

- Jasper

---

~选择器很酷，但它只适用于CSS3。所以在IE 8或更早版本中就没有这个运气了。 - Paul Alexander

不错的建议，不过+在IE7及以上版本都支持，所以如果两个元素在DOM中紧挨着，那么这种方法也可以。我会更新我的回答。这里是相邻兄弟选择器（~）的支持情况：http://caniuse.com/#feat=css-sel2 - Jasper

然而，这个解决方案需要修改原始的HTML。如果您看一下我的解决方案，不需要对原始页面进行任何更改。 - Paul Alexander

Answer 3

if(jQuery("div#elementAbsolute")) { // 执行你的代码 }

此外，你要确保你的 div 标签有闭合标签。

- dyelawn

---

你不需要先选择div，然后再选择id。jQuery("#elementAbsolute") 更快。 - xbrady