Relative parent, absolute positioning vertically by percentage?

Question

I'm trying to create a vertically positioned DIV by percentage. I have the parent container to set to relative and the content div set to absolute. This works fine when I position the content div with pixels, but when I try percentages the percentages are disregarded:

.container { position: relative; }   .content { position: absolute; left: 10%; top: 50%; }   <div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div. </div></div> 

The content div appears at the top of the page, disregarding the 50% vertical placement. What am I missing? Thanks in advance!

Answer 1

The absolutely positioned element is taken out of the natural flow of the document which means your container has zero height and width.

10% and 50% of that zero height and width are, of course, zero.

If you give your container a height and width, your percentage positions will start to work as you want.

Here is a working example.

.container { position: relative; width:500px; height:500px; }