Position absolute top property based on the parent width

css, html, javascript

Solution

I think you're looking for `margin-top` property.

A percentage value on top/bottom `padding` or `margins` is relative to the `width` of the containing block.

.child-of-body {
    position: absolute;
    margin-top: 10%;
}

JSFiddle Demo.

Also, it's worth to take a look at Louis Lazaris' Vertical Percentages in CSS article.

Problem

Having the following HTML ``` <div class="child-of-body"> This is a text </div> ``` and the following CSS ``` .child-of-body { position: absolute; top: 10%; } ``` I can set the `top` value of the selected elements. I see that `10%` is computed based on the parent height. How can I set the `top` property in percent values based on the parent width? I know that is possible via JavaScript, but would it be possible with CSS only? JSFIDDLE

Original source