z索引內浮動，而不溢出到兄弟節點

考慮以下DIV結構：z索引內浮動，而不溢出到兄弟節點

<style> 
#content{float:left;width:100%;} 
#overlay{position:absolute;z-index:100;} 
</style> 

<body> 
    <div id="header">header</div> 
    <div id="overlayBox"> 
     <div id="overlay"> 
      I want to overlay #content. 
      If my height is greater than 
      #content, I don't want to 
      spill onto other elements. 
      I want to push them away. 
     </div> 
    </div> 
    <div id="content">content</div> 
    <div id="footer">footer</div> 
</body>

在這個例子中我想：

推#header和#footer路程，如果#overlay變得更大高於#content

即使DIV結構是完全錯誤的，它只是用來說明需求。

這是我遇到的問題的一個很好的例子： http://jsfiddle.net/Udqkc/

來源

2012-10-09 Dan Kanze

您的標記似乎罰款，你真正需要的是什麼？ –

@ Mr.Alien這不起作用。這只是概念。你可以提供快速的解決方案，做我想通過jsfiddle或什麼來實現？ –

我確實提出了你提供的標記，它確實推開頁眉和頁腳 –

好了，搬到#content到#overlayBox：

<div id="overlayBox"> 
     <div id="overlay"> 
      I want to overlay #content. 
      If my height is greater than 
      #content, I don't want to <br /> 
      spill onto other elements. <br /> 
      I want to push them away. 
     </div> 
     <div id="content">content</div> 
    </div>

輕微改變CSS：

#overlay {float:left;} 
#overlayBox {overflow:hidden;} 
#content {position:absolute;}

工作實例 - http://jsfiddle.net/nKwQF/14/

希望這有助於，因爲我不敢肯定，如果你能移動#content

來源

2012-10-09 07:38:48

這正是我需要的除了一件事。有沒有什麼辦法可以修改這個以達到相同的效果，但保留'＃content'作爲一個浮點數？ –

真的，現在我想到了它......如果'＃content'大於'＃overlay'，我仍然希望疊加層至少具有相同的內容高度。認爲背景模態。 –

好吧，也許有一種方法可以用CSS做到這一點，但我現在沒有任何想法，而且我也不確定是否會。但是，如果你可以使用一些JS，這將非常簡單 - http://jsfiddle.net/68PbU/14/即使不改變初始標記和樣式。（jQuery使用，但它可以做到沒有它，只是更多的代碼） –

z索引內浮動，而不溢出到兄弟節點

回答

相關問題