Относительное позиционирование и отступы CSS

Question

После нескольких часов в талии мне удалось найти решение моей проблемы, поэтому вопрос не в том, «как», а «почему это работает так». Вот мой разобранный пример:

<div id="header"> 
    <div id="header-element">header</div> 
</div> 
<div id="footer">footer</div>​ 

CSS:

#header { 
    width: 100%; 
    position: relative; 
    padding-bottom: 5%; 
} 
#header-element { 
    position:absolute; 
    bottom: 0; 
} 
#footer { 
    position: relative; 
    margin-top: 5%; 
}​ 

И jsFiddle - http://jsfiddle.net/H7jwm/3/.

Моя проблема заключалась в том, как позиционировать эти относительно позиционированные элементы, используя процент, сначала один% от верхней части документа, а второй - первый. Я достиг этого, указав padding-bottom на первый, а margin-top - на второй, но у меня есть решение с грубой силой - опробовать каждое дистанционно логичное решение. Теперь, если вы удаляете прокладку, margin-top второго элемента становится полем между этим элементом и вершиной документа, а не первым элементом, а первый элемент «занимает» остальную часть пространства до вершины.

Вопрос в том, почему это дополнение работает так? Или, чтобы перефразировать его, как работает прокладка с относительным позиционированием?

Answer 1

На самом деле, вы смешиваете позиции. Ваш #header имеет высоту ноль. Правильно, нуль как ни в чем, потому что у него нет никакого относительного содержания. #header-element абсолютно позиционируется и потому, что #header имеет высоту 0, он точно находится в пространстве заполнения.

Итак, если вы удаляете нижнюю часть от #header, то #footer перемещается вверх, начиная с самого верха документа. Из-за крайности вверх, между верхней границей документа и словом «нижний колонтитул» есть пробел.

Но у вас все еще есть то абсолютно позиционируемое #header-element, которое теперь будет прямо в этом крайнем пространстве.