Break out di position: relative * senza * cambiare struttura

Question

Un esempio semplificato:

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} 

come un violino: http://jsfiddle.net/h6BNz/

OK quindi C è davanti a B e dietro D e posizionato rispetto a A. Vorrei posizionarlo rispetto al documento, ma tenerlo tra B e D (sia in z-index che in ordine di tabulazione). Se la posizione di C viene modificata in position:fixed, fa esattamente ciò che voglio tranne che (ovviamente) non sta scorrendo con la pagina.

Ho visto un sacco di soluzioni che comportano la rottura del div-out del suo genitore per realizzare questo, ma ciò richiederebbe l'impostazione di z-indices e tab order che sembra un incubo da gestire (questo è un plugin, quindi il il codice circostante è fuori dal mio controllo).

Come posso dare a C una posizione veramente assoluta senza rompere B o D o modificare la struttura? JavaScript va bene per l'impostazione, ma ho bisogno che la posizione finale della pagina sia perfettamente arrotondata (vedi alcune delle mie altre domande se sei interessato al perché), quindi non penso di poter usare un metodo absolutePosition - absolutePositionOfContainer.

Answer 1

Se #A ha position: relative, qualsiasi parte al suo interno verrà posizionata rispetto a #A.

Quindi #B#C e #D saranno tutti contenuti da #A. Non puoi posizionarlo rispetto al documento se si trova all'interno di qualcosa con una posizione.

È possibile utilizzare i margini negativi per posizionarlo al di fuori di #A, tuttavia, fornito #A ha overflow: visible.