突破位置：相对*没有*改变结构

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前面D后面，并且相对于A定位。我想将它相对于文档定位，但保持在B和D之间（在z-index和Tab顺序中）。如果C的位置更改为position:fixed，则它会完全符合我的要求，但（显然）不会滚动页面。

我已经看到很多解决方案涉及打破其父级的div以实现这一目标，但这需要设置z-indices和Tab顺序，这似乎是一个噩梦来管理（这是一个插件，所以周围代码不受我的控制。）

如何在不破坏C或B或更改结构的情况下，为D提供真正绝对的位置？ JavaScript可以用来设置它，但是我需要最终页面位置完全舍入（如果你对原因感兴趣，请参阅我的其他一些问题），所以我认为我不能使用absolutePosition - absolutePositionOfContainer方法

Answer 1

如果#A有position: relative，其中的任何内容都将相对于#A定位。

因此#B #C和#D将全部包含在#A中。如果文档位于具有位置的内容中，则无法相对于文档进行定位。

您可以使用负边距将其置于#A之外，但是，如果#A具有overflow: visible。