不允許相對位置的div重疊絕對位置的div

我的實際問題更復雜，但歸結爲這一點。我如何使用CSS來禁止相對定位的div堆疊在絕對定位的div上。問題的不允許相對位置的div重疊絕對位置的div

例子：

<div id="absolute"></div> 
<div id="relative"></div> 

div{ 
    width: 100px; 
    height: 100px; 
    opacity: .5; 
} 

#absolute{ 
    position: absolute; 
    background-color: red; 
} 
#relative{ 
    position: relative; 
    background-color: blue; 
}

Codepen

這可能與CSS？因此，相對定位的div將被推下或到側面，直到它不再覆蓋其他絕對定位的div。基本上相對股利會像絕對股利是相對的。

要添加性質的小細節做的問題：

我有在頂部和左側的絕對定位菜單的網頁。然後我有一個div我在注入模板（Angular）。問題在於模板在菜單下結束。我試圖應用邊距或填充，但是正在搞亂我的引導網格。所以我希望菜單可以像對待主格一樣對待，但仍然保持原樣。

來源

2015-12-18 cfly24

絕對定位的元素將從文檔流中移除，這意味着它不會對其他元素產生影響。純CSS不可能。 –

但是，如果你嵌套的元素，你可以添加'頂部：100％'到相對定位的元素 - http://codepen.io/anon/pen/NxNjGQ –

當您使用position:absolute時，您告訴瀏覽器佈局引擎該元素是從頁面佈局中刪除。您指定的手動位置不會以任何方式影響頁面的佈局。因此，你不能手動定位它，並圍繞它進行佈局。

您必須選擇其中一個，或者不要使用position: absolute，以便它將參與頁面的佈局，或者使所有內容絕對和手動定位，以避免重疊。

有一些混合方法，其中一個項目可以完全放置在一個容器中，而容器本身是相對的（不是絕對的），以便容器參與頁面的佈局，事物將圍繞容器佈置（和因此圍繞絕對定位的元素（如果容器被設置爲合適的尺寸），但這實際上只是一個技術性問題，因爲它將絕對定位的物品放入非絕對定位的容器中，因此它不是絕對定位在整體上頁面。

來源

2015-12-18 02:32:42 jfriend00

好的，謝謝。我只是希望除了使用100px的邊距外，還有其他的東西可以做 – cfly24

這聽起來像你的問題可以通過分離元素和應用浮動屬性來解決。但是，根據您的問題，當您使用相對屬性時，它允許您設置相對於其父項的位置。如果絕對定位的元素是父元素，那麼你的代碼是不正確的，保持它們分開將是一個硬編碼的問題，以保持彼此之間的最小距離。然而，它不是父母，那麼這些元素之間沒有任何關係，你必須明確地定義他們的位置，以便他們不會互相影響。但是，這聽起來像是應用浮動屬性的情況。

來源

2015-12-18 02:38:34 InterestingGuy

不允許相對位置的div重疊絕對位置的div

回答

相關問題