Absolute Positioning With Percentages Giving Unexpected Results

Please consider this jsfiddle, containing this html code:

TEST

And some CSS: #container { border: 1px

Solution 1:

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"

Solution 2:

add

position:relative; 

to container div .

Solution 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.