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; } 

Answer 2

Welp, my first post in SE. For those of you seeing this in the future, you can actually use viewport height as a measure of percentage.

.container {
    position: relative;
    top: 10vh;  // 10% of height from top of div
}

Answer 3

You will likely need to add height: 100% to your .container div:

.container { height: 100%; position: relative; }

and possibly all the ancestor elements:

html, body { height: 100%; }

Answer 4

@Jaime Dixon's answer was great. Beautiful, two great concepts given there.

1. The percentage, the relative units are relative TO SOMETHING, you must understand what's the reference container to which those values are calculated.

2. Even if you have a container, there CAN BE an arbitrary behavior if the container has it's dimensions as "auto". So, to have a predictable behavior, be sure that the container has a dimension better than simply saying "auto". OR, if your container also has 100%, and its parent and so on, make sure you have a css instruction in which you have specified the height of the elements html, body:

example:

html, body {
    height: desired_value;
}