Break out of position:relative *without* changing structure

Question

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}

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

OK so C is in front of B and behind D, and positioned relative to A. I would like to position it relative to the document, but keep it between B and D (in both z-index and tab order). If C's position is changed to position:fixed, it does exactly what I want except for (obviously) not scrolling with the page.

I've seen plenty of solutions which involve breaking the div out of its parent to accomplish this, but that would require setting z-indices and tab order which seems like a nightmare to manage (this is a plugin, so the surrounding code is outside my control).

How can I give C a truly absolute position without breaking B or D, or changing the structure? JavaScript is fine for setting this up, but I need the final page position to be perfectly rounded (see some of my other questions if you're interested in why), so I don't think I can use an absolutePosition - absolutePositionOfContainer method.

Answer 1

If #A has position: relative anything inside of it will be positioned relative to #A.

So #B #C and #D will all be contained by #A. You can't position it relative to the document if it is inside something with a position.

You can use negative margins to position it outside of #A, however, provided #A has overflow: visible.