Position absolute top property based on the parent width

Having the following HTML

<div class="child-of-body">
    This is a text

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?




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.


try to add position: relative for the parent element.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.