Position absolute top property based on the parent width

Question

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?

Could you be more elaborative because why generally you worry about top and width. — Arunkumar Srisailapathi, Jan 29 '14 at 14:39

score 7 · Accepted Answer · answered Jan 29 '14 at 14:50

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

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

score 1 · Answer 2 · answered Jan 29 '14 at 14:40

1

try to add position: relative for the parent element.

answered Jan 29 '14 at 14:40

Cristina Cristea

When I resize the browser window width I want to see the text moving vertically and to have the same aspect ratio. – GhitaB Jan 29 '14 at 14:49
I don't think this will work if this is what you need. – Cristina Cristea Jan 29 '14 at 14:53

2 Answers2