Position gap: relative * without structural change

A simplified example:

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}

Like a fiddle: http://jsfiddle.net/h6BNz/

OK, therefore it Cis located in front Band behind Dand is positioned relatively A. I would like to place it relative to the document, but keep it between B and D (both in z-index and in tab order). If the position is Cchanged to position:fixed, it does exactly what I want, except for (obviously) not scrolling the page.

I have seen many solutions related to splitting a div from its parent in order to accomplish this, but for this you will need to set the z-indexes and tab order, which seem like nightmares to control (this is a plugin, so the surrounding code is out of my control).

C B D ? JavaScript , , (. , , ), , absolutePosition - absolutePositionOfContainer.