Относительный родитель, абсолютное позиционирование по вертикали в процентах?

Я пытаюсь создать DIV по вертикали в процентах. У меня есть родительский контейнер для установки в относительный, а содержимое div установлено в абсолютное. Это отлично работает, когда я размещаю содержимое div с пикселями, но когда я пытаюсь выполнить проценты, проценты не учитываются:

.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>

Содержимое div отображается вверху страницы, без учета вертикального размещения 50%. Что мне не хватает? Заранее спасибо!

Ответ 1

Абсолютно позиционируемый элемент извлекается из естественного потока документа, что означает, что ваш контейнер имеет нулевую высоту и ширину.

10% и 50% от этой нулевой высоты и ширины, конечно, равны нулю.

Если вы придаете контейнеру высоту и ширину, ваши процентные позиции начнут работать так, как вы хотите.

Вот рабочий пример.

.container { position: relative; width:500px; height:500px; }

Ответ 2

Welp, мой первый пост в SE. Для тех из вас, кто видит это в будущем, вы можете фактически использовать высоту видового экрана в качестве процента процента.

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

Ответ 3

Вам, скорее всего, нужно добавить height: 100% в ваш .container div:

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

и, возможно, все элементы предка:

html, body { height: 100%; }

Ответ 4

@Джей Диксон ответил, было здорово. Красивые две отличные концепции.

Процент, относительные единицы относительны к ЧТО-ТО, вы должны понять, какой ссылочный контейнер, на который рассчитаны эти значения.
Даже если у вас есть контейнер, МОЖЕТ БЫТЬ произвольное поведение, если контейнер имеет размеры как "авто". Итак, чтобы иметь предсказуемое поведение, убедитесь, что контейнер имеет измерение лучше, чем просто "авто". ИЛИ, если ваш контейнер также имеет 100%, а его родительский элемент и т.д., Убедитесь, что у вас есть команда css, в которой вы указали высоту элементов html, body:

Пример:

html, body {
    height: desired_value;
}