如何在加載後在絕對定位元素周圍添加邊距或填充？

所以基本上我有一個這樣的佈局：如何在加載後在絕對定位元素周圍添加邊距或填充？

<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之間移動它並創建一些空格？

另請注意，此模板用於多個站點，因此只能在「標題」內存在「elementAbsolute」時才能添加空白。

我一直在思考使用jQuery after（）函數在創建空間之前和之後放置一個空白div，但隨後我的問題變成我只希望在「elementAbsolute」開啓時運行此函數該頁面，否則無論發生什麼，我都會留下空白。

感謝您的幫助！

來源

2012-01-11 user1074378

爲什麼不把它擋住，而不是絕對的打開的時候嗎？ – 2012-01-11 19:56:19

演示或jsfiddle會有所幫助。 – 2012-01-11 19:56:25

「打開或關閉」是什麼意思？它是一個顯示屬性還是根據條件渲染？ – Coronus 2012-01-11 19:56:58

如果elementAbsolute是固定高度的那麼簡單的解決將是空白添加到headerElement 1或2，而不是

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

來源

2012-01-11 20:01:11

很好的使用鄰居兄弟選擇器。 – Jasper 2012-01-11 20:26:18

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

而且，你想，一定要對你的div結束標記。

來源

2012-01-11 19:57:47 dyelawn

您不需要按div選擇，然後按ID選擇。 jQuery（「＃elementAbsolute」）更快。 – xbrady 2012-01-11 20:01:13

您可以使用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）添加一些餘量。

來源

2012-01-11 19:58:53 Jasper

〜選擇器很酷，但它只是CSS3。所以在IE 8或更早版本中沒有運氣。 – 2012-01-11 20:06:48

良好的調用，但是'+'支持回到IE7，所以如果這兩個元素在DOM中彼此緊挨着，那麼這將起作用。我會更新我的答案。以下是對鄰接兄弟選擇器（'〜'）的支持：http://caniuse.com/#feat=css-sel2 – Jasper 2012-01-11 20:14:48

但是，此解決方案需要修改原始HTML。如果您查看我的解決方案，則不需要更改原始頁面。 – 2012-01-11 20:18:09

如何在加載後在絕對定位元素周圍添加邊距或填充？

回答

相關問題