Позиционирование элементов на странице

Недавно пришлось поучаствовать в собеседованиях при приёме на вакансию "html-верстальщика". Удивило то, что из просмотренных 10 кандидатов (судя по резюме, не самых плохих), почти никто не смог четко и ясно объяснить такую краеугольную и важную для верстальщика тему, как позиционирование элементов на странице (то есть что означают разные значения css-свойства position), хотя ребята работали и в студиях, и у клиентов, и на фрилансе.

Итак, первый самой простой вариант по умолчанию - статическое позиционирование (position: static;). Оно означает, что элемент находится на своём месте в общем потоке страницы на своей дефолтной, "нормальной" позиции. Применение к нему свойств top, left, right и bottom ничего не дадут. Кстати, в этом случае термин "позиционирование" обычно не применяется.

Далее, относительное позиционирование (position: relative;) - элемент выходит из общего потока страницы и позиционируется относительно своего дефолтного, "нормального" положения с помощью свойств top, left, right и bottom. При этом из-под элемента на его дефолтной позиции остается пустое место, которое ничем не занимается, то есть он продолжает оказывать влияние на окружающие элементы.

Ставя фиксированное позиционирование (position: fixed;) мы позиционируем элемент относительно окна браузера. Он выходит из общего потока страницы, переставая оказывать влияние на соседние элементы, и при скроллинге он всегда будет оставаться на своём месте. 

Абсолютное позиционирование (position:absolute;) заключается в том, что такой элемент выходит из общего потока страницы и позиционируется относительно первого родительского элемента, с позиционированием, отличным от статического. Звучит витиевато, но если прочитать несколько раз и понять, то всё достаточно просто. А если такого родительского элемента не находится, то абсолютно позиционированный элемент будет позиционирован относительно body, при этом влияния на соседей этот элемент не имеет и при сколлинге будет двигаться вместе со страницей.

На примере ниже, понятно, что элемент с классом .posFix игнорирует все родительские элементы и позиционируется относительно окна браузера, .posAbs игнорирует родителя с .posStat и позиционируется относительно первого родительского элемента с не статическим позиционированием (.posRel), а сам .posRel встал в 20 пикселях вниз и вправо от своей "нормальной" позиции.