posicionamiento absoluto con porcentajes dar resultados inesperados

Question

favor considere this jsfiddle, que contiene este código html:

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

Y un poco de CSS:

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

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

Los resultados me sorprenden. En cuanto al W3 positioning props, esperaría que el #item tenga su valor de izquierda en el 50% del "bloque contenedor": el #container. Sin embargo, parece estar en el 50% de toda la página, no solo en el containing block. Aún más sorprendente: si digo que el desbordamiento del contenedor permanece oculto, la "PRUEBA" seguirá allí.

Todos los principales navegadores (incluyendo IE9) parecen exhibir el mismo comportamiento, así que mis expectativas son probablemente incorrecta. La pregunta entonces es: lo que parte de la especificación explica este comportamiento, si las hay?

Answer 1

El posicionamiento absoluto se aplica con respecto a la siguiente elemento padre cuya posición no es estática. En tu caso, esa es la página completa. Intente configurar position: relative en la división de contenedores.
See the jsFiddle.

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

Answer 2

Al dar una posición absoluta elemento que lo saca del flujo normal del documento. Absoluto es la parte superior izquierda de la pantalla, independientemente de los otros elementos de la página. Así que al decir izquierda: 50% está diciendo a mitad de camino desde la izquierda absoluta de la pantalla.

Answer 3

añadir

position:relative; 

al contenedor div.