Absolute positioning with percentages giving unexpected results

Question

Please consider this jsfiddle, containing this html code:

  
TEST

A

Answer 1

add

position:relative; 

to container div .

Answer 2

The absolute positioning is applied relative to the next parent element whose position is not static. In your case, that's the full page. Try setting position: relative on the container division.
See the jsFiddle.

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

Answer 3

When giving an element absolute position you take it out of the normal flow of the document. Absolute is the very upper left portion of the screen regardless of the other elements in the page. So by saying left: 50% you're saying half way in from the absolute left of the screen.