Почему absolute 100% не корректно отображает div?

Question

[Ingernirated]

Почему absolute top 100% - height не выдает значение нижней части блока, а отображает его за пределами?
https://jsfiddle.net/tpjqtyjh/1/

Answer 1

[Сергей Горячев]

В этом примере https://jsfiddle.net/tpjqtyjh/1/
Красный абсолютный блок позиционируется относительно body, все верно.
Поэтому он "выпирает" за пределы зеленого.

.main {
	position: relative;
}

Comments

[Ingernirated]

а от какой точки он берет отсчёт для расчета top:100%, чтобы можно было понять, как его корректно регулировать?

[Сергей Горячев]

Ingernirated: Если "родителю" не указан позишн релатив, то от первого элемента, в данном случае от html.

[Ingernirated]

Sergey Goryachev: как я понял, в CSS только при наличии связки - у родителя relative, а у ребёнка absolute можно точно позиционировать?
Другие варианты строго по px подбирая на глаз, когда блоку мы задали absolute и fixed?

[Сергей Горячев]

Ingernirated: а нет, сорри, мой комментарий не верен. Если нет блоков с position relative, то расчет идет от DOM, а дом всегда равен высоте экрана (если сайт меньше экрана) или высоте сайта (если сайт больше дома).

[Сергей Горячев]

Ingernirated: А вообще я не могу понять, что вы конкретно хотите сделать. Было бы проще, если бы вы описали задачу, конкретно, что не так) https://jsfiddle.net/webirus/tpjqtyjh/4/

Answer 2

[HamSter]

Не совсем понятно, что Вы имеете ввиду!

Но предположу, что родителю .main нужно задать position: relative; для корректного отображения блока .go

Comments

[HamSter]

Ingernirated: В ответе же написано! .main {position: relative; }