Позиция абсолютного верхнего свойства на основе родительской ширины

Имея следующий HTML

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

и следующий CSS

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

Я могу установить значение top для выбранных элементов. Я вижу, что 10% вычисляется на основе родительской высоты.

Как я могу установить свойство top в процентах на основе родительской ширины?

Я знаю, что это возможно с помощью JavaScript, но возможно ли это с помощью CSS?

Я думаю, что вы ищете свойство margin-top.

Процентное значение сверху/снизу padding или margins относится к width содержащего блока.

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

Кроме того, стоит взглянуть на Луи Лазарис Вертикальные проценты в CSS.

>

попробуйте добавить position: relative для родительского элемента.