Posizionamento assoluto con percentuali dare risultati inaspettati

Question

perche this jsfiddle, che contiene questo codice html:

<div id="container"> 
    <div id="item">TEST</div> 
</div> 

E alcuni CSS:

#container { 
    border: 1px solid red; 
    height: 100px; 
    width: 100px; 
} 

#item { 
    border: 1px dashed purple; 
    position: absolute; 
    left: 50%; 
} 

I risultati mi sorprendono. Guardando il W3 positioning props mi aspetto che il #item abbia il suo valore di sinistra al 50% del "blocco contenitore": lo #container. Tuttavia, sembra essere al 50% dell'intera pagina, non solo allo containing block. Ancora più sorprendente: se dico che l'overflow del contenitore rimane nascosto, il "TEST" sarà ancora lì.

Tutti i principali browser (incluso IE9) sembrano presentare lo stesso comportamento, quindi le mie aspettative sono probabilmente errate. La domanda è quindi: quale parte della specifica spiega questo comportamento, se esiste?

Answer 1

Il posizionamento assoluto viene applicato rispetto all'elemento padre successivo la cui posizione non è statica. Nel tuo caso, questa è la pagina intera. Prova a impostare position: relative nella divisione container.
See the jsFiddle.

See:W3C - 10.1 - Definition of "containing block"

Answer 2

Nel dare una posizione assoluta elemento si tira fuori del normale flusso del documento. Assoluto è la parte in alto a sinistra dello schermo, indipendentemente dagli altri elementi nella pagina. Quindi dicendo left: 50% stai dicendo a metà strada dalla parte sinistra assoluta dello schermo.

Answer 3

aggiungere

position:relative; 

al div contenitore.