擺脫位置：相對於*無*改變結構

Question

簡化示例：

HTML：

<div id="A"> 
    <div id="B"></div> 
    <div id="C"></div> 
    <div id="D"></div> 
</div> 

CSS：

#A,#B,#C,#D{width:100px;height:100px} 
#A{position:relative;width:220px;top:20px;left:20px;background:#FF0000} 
#B{position:absolute;top:0;left:0;background:#FFFF00} 
#C{position:absolute;top:10px;left:80px;background:#00FF00} 
#D{position:absolute;background:#00FFFF;top:0;right:0} 

作爲小提琴：http://jsfiddle.net/h6BNz/

行所以C在B之前，在之後，並且相對於A定位。我想將其與文檔相對放置，但將其保留在B和D之間（以z索引和Tab鍵順序）。如果C的位置更改爲position:fixed，那麼它確實是我想要的，除了（顯然）不滾動頁面。

我見過大量的解決方案，其中包括打破div的父母來完成這一點，但這需要設置z-indices和tab順序，這似乎是一個噩夢來管理（這是一個插件，所以周圍的代碼在我的控制範圍之外）。

如何在不破壞B或D或改變結構的情況下給C一個真正的絕對位置？ JavaScript設置起來很好，但我需要最終的頁面位置完全圓潤（如果您對原因感興趣，請參閱其他一些問題），所以我不認爲我可以使用absolutePosition - absolutePositionOfContainer方法。

Answer 1

如果#A有position: relative其中的任何內容都將相對於#A定位。

所以#B#C和#D將全部包含在#A中。如果文檔位於某個位置的某個位置，則無法將其與文檔相對放置。

您可以使用負邊距將其定位在#A之外，但是，只要#A具有overflow: visible即可。