html - 突破位置 :relative *without* changing structure

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}

作为 fiddle :http://jsfiddle.net/h6BNz/

OK 所以 C 位于 B 之前和 D 之后，并且相对于 A 定位。我想相对于文档定位它，但将它保持在 B 和 D 之间(在 z-index 和 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。