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

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 order,这似乎是一个噩梦来管理(这是一个插件,所以周围的代码在外面我的控制).

我怎么可以给C没有打破一个真正的绝对位置B或D,或改变结构？JavaScript可以设置它,但我需要最终页面位置完美舍入(如果你对原因感兴趣,请参阅我的其他一些问题),所以我认为我不能使用absolutePosition - absolutePositionOfContainer方法.

Answer 1

如果里面#A有position: relative任何东西,它将相对于#A.

所以#B #C,#D所有人都将被包含在内#A.如果文档位于具有位置的内容中,则无法将其相对于文档定位.

您可以使用负边距将其定位在外部#A,但是,提供#A了overflow: visible.