html - Break out of position:relative *without* changing structure -

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 fiddle: http://jsfiddle.net/h6bnz/

ok c in front of b , behind d, , positioned relative a. position relative document, keep between b , d (in both z-index , tab order). if c's position changed position:fixed, want except (obviously) not scrolling page.

i've seen plenty of solutions involve breaking div out of parent accomplish this, require setting z-indices , tab order seems nightmare manage (this plugin, surrounding code outside control).

how can give c absolute position without breaking b or d, or changing structure? javascript fine setting up, need final page position rounded (see of other questions if you're interested in why), don't think can use absoluteposition - absolutepositionofcontainer method.

if #a has position: relative inside of positioned relative #a.

so #b #c , #d contained #a. can't position relative document if inside position.

you can use negative margins position outside of #a, however, provided #a has overflow: visible.